체크박스 사파리 크로스브라우징 도와주세요 채택완료
museplay
6년 전
조회 2,899
style.css
</p>
<p>input[type="checkbox"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}</p>
<p>input[type="checkbox"]{display:inline-block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none; color:#999; font-size:18px;}</p>
<p>input[type="checkbox"]+label::before{content:''; display:inline-block; width:40px; height:40px; margin:0; background:#fff; border:1px solid #e4e4e4; border-radius:0px; vertical-align:middle; margin-right:10px;}</p>
<p>input[type="checkbox"]+label::before{content:''; background:#fff url('../../img/icon_checked.png') no-repeat 50% 50%; border:1px solid #959da6; background-size:70%;}</p>
<p>
안녕하세요.
체크박스를 다같은 이미지?로 커스텀을 하고 싶습니다.
그런데 핸드폰 사파리로 보니 체크박스는 기본으로 적용되는거 같더라구요...
그리고 삼성브라우저도 적용이 안되더라구요...
접두어를 추가해야 적용시킬수 있을까요?
도와주세요~
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
6년 전
https://material.io/develop/web/components/input-controls/checkboxes/">https://material.io/develop/web/components/input-controls/checkboxes/
metrial design같은걸 사용해 보세요...
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
m
museplay
6년 전
좋은 커스텀이 많네요^^ 감사합니다~
댓글을 작성하려면 로그인이 필요합니다.
6년 전
https://caniuse.com/#search=-webkit-user-select">https://caniuse.com/#search=-webkit-user-select 해당 사이트에서 해당 브라우저에서 해당 css가 지원하는지 보시고 아니면 다른걸로 대체하셔야 합니다
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
m
museplay
6년 전
지원한다고 써져있는데 안되더라구요..
근데 어처구니 없이 쿠키삭제를 안해서;;
답변 감사합니다^^ 조언해주신 사이트도 참고하도록 하겠습니다~
근데 어처구니 없이 쿠키삭제를 안해서;;
답변 감사합니다^^ 조언해주신 사이트도 참고하도록 하겠습니다~
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인