체크박스/라디오버튼에는 css가 먹지를 않는다. 그래서 통상 보이지 않게 만든 뒤 다른 태그를 덧씌워서 해당 태크에 css를 넣어 다른 모양의 체크박스나 라디오 버튼을 만드는데...
웹이나 안드로이드폰에서는 문제가 없는데 아이폰 iOS에서는 해당 input 체크박스/라디오버튼에 점이 보인다던지 원하던 화면과 다르게 나오는 문제가 있다. 이는 아이폰은 input에 자체적인 효과를 넣기 때문.
이를 위해
input {-webkit-appearance: none;-webkit-border-radius: 0;}
이런식으로 웹킷을 통해 아이폰/아이패드 iOS 전용 표시를 없앨 수 있다.
그런데 이래도 점 같은 것이 나와 없어지지 않는 문제가 있었는데, 원인은 원래의 input을 보이지 않게 처리하는 과정에서 visibility:hidden; 처리를 안했기 때문.
input{cursor:pointer;position:absolute;top:0;left:0;width:0;height:0;visibility:hidden;}
이렇게 visibility:hidden; 처리를 하면 점 같은 것은 사라진다.
'웹접근성과 웹표준' 카테고리의 다른 글
| J쿼리 없이 transform css로 움직이는 아이콘 만들기 (0) | 2021.06.22 |
|---|---|
| J쿼리 없이 CSS transition으로 카드 뒤집기 (0) | 2021.06.22 |
| iOS 키보드 덮침 현상 웹앱 수정 css (0) | 2020.12.08 |
| css에서 폰트 이상없이 불러오는데 텍스트 깨져보일 경우 (0) | 2019.12.18 |
| 테이블에 외곽선+라운딩+배경색 넣었을 때 선이 끊기는 문제 (0) | 2019.09.17 |
