체크박스 사파리 크로스브라우징 도와주세요

체크박스 사파리 크로스브라우징 도와주세요

QA

체크박스 사파리 크로스브라우징 도와주세요

본문

style.css


input[type="checkbox"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
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;}
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;}
input[type="checkbox"]+label::before{content:''; background:#fff url('../../img/icon_checked.png') no-repeat 50% 50%; border:1px solid #959da6; background-size:70%;}

 

안녕하세요.

체크박스를 다같은 이미지?로 커스텀을 하고 싶습니다.

그런데 핸드폰 사파리로 보니 체크박스는 기본으로 적용되는거 같더라구요...

그리고 삼성브라우저도 적용이 안되더라구요...

접두어를 추가해야 적용시킬수 있을까요?

도와주세요~

이 질문에 댓글 쓰기 :

답변 2

https://material.io/develop/web/components/input-controls/checkboxes/

 

metrial design같은걸 사용해 보세요...

 

https://caniuse.com/#search=-webkit-user-select 
해당 사이트에서 해당 브라우저에서 해당 css가 지원하는지 보시고 아니면 다른걸로 대체하셔야 합니다

답변을 작성하시기 전에 로그인 해주세요.
전체 60
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT