메뉴 건너뛰기

HEUKMYO

Mobile

아이폰 input 박스선 없애기

2013.08.06 10:19 read.237

아이폰 input 박스선 없애기



요런 bg이미지로 깔고 input창을 투명하게 넣어줬다.

문제는 사파리랑 아이폰시뮬레이터에서도 투명하게 잘나오는데.

정작 아이폰에서 보면 박스선이 보이는거다. ㅡㅡ;

해결방법은.



-webkit-border-radius:0; -webkit-appearance:none;


[출처] 모바일웹 표준코딩 - 아이폰 input 박스선 없애기|작성자 꼼순


위 사용법으로 하면 크롬은 checkbox가 안보임 대신해결한 소스

input:checked[type="checkbox"]{background-color:#fff;-webkit-appearance:checkbox;}


input[type="text"],input[type="password"],input[type="email"],input[type="search"],input[type="image"],input[type="tel"],
textarea{-webkit-appearance:none;-webkit-border-radius:0;}



크롬에서 checkbox 안보이는 문제

IE, firefox, opera 다 되는데 chrome과 안드로이드 브라우져에서만 checkbox가 안나와서 원인을 찾아 본 결과

-webkit-text-size-adjust: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: 'none'
위로