본문 바로가기

input

input 스타일 ios 초기화 input type 스타일을 button 혹은 submit 으로 주고 신나게 css로 디자인을 추가해줬습니다. PC에서 봤을 때 아무 문제가 없어서 안심하고 있다가 아이패드로 확인하고 css 디자인이 하나도 적용되지 않아서 깜짝 놀랐습니다. 아이패드에서 전용 브라우저 사파리는 물론 크롬을 깔고 봤는데도 같은 현상이 일어나는 것을 보니 ios 기본 버튼 스타일이 출력되는 듯했습니다. ​ 다이렉트로 스타일을 줘도 먹지 않아서 갑갑해하고 있던 상황이었는데, ios 스타일 초기화를 한 줄 추가로 할 수 있는 팁이 있어서 공유해보려고 합니다. input,button {border-radius:0; -webkit-appearance:none}
input (체크박스, 라디오버튼) 스타일 설정 및 디자인 입히기 input type css 퍼블리싱을 할때 심심한 체크박스나 라디오버튼같은 인풋타입을 꾸며주고 싶을 때가 있는데요! 이미지를 이용해서 체크박스, 라디오버튼에 디자인을 입혀주는 방법을 보여드리려고 합니다. option 위처럼 코딩을 하고 아래쪽에 정리된 스타일 시트를 적용해 주면 됩니다. css 스타일 원리를 알려드리면 input[type="radio"]:not(old) 에서 투명도를 빼서 기존 디자인을 지워주고 input[type="radio"]:not(old) + label과 input[type="radio"]:not(old):checked + label 라벨에 백그라운드 이미지를 넣은 후에 투명해진 인풋 라디오로 마진값을 주는 원리입니다. ​ 여기서 input[type="radio"]:not(old)..