IE에서 label 태그 안에 img 클릭시 체크박스에 체크되지 않는 현상 (CSS로 처리)
작성일 17-07-18 09:55
페이지 정보
작성자서방님 조회 299회 댓글 0건본문
IE에서 Label 태그에 일반 텍스트가 아닌 Image로 처리할경우 버그
<input id="seobangnim" type="checkbox">
<label for="seobangnim">여기를 클릭</label>
위에서 텍스트 "여기를 클릭"을 클릭하면 체크박스에 자동 체크된다.
input 의 id 값과 label for 의 값이 동일하기 때문에 가능한 방법인데,
텍스트 "여기를 클릭" 부분에 이미지를 대체해도 가능하다.
그런데 IE 에서는 이미지를 사용할 경우, 이미지를 클릭해도 체크박스에 체크되지 않는 현상이 발생한다.
다른 블로그를 찾아보면 자바스크립트를 이용해서 처리한 곳이 많다.
CSS 로만 처리해 보자!!
<style type="text/css">
label {display:inline-block;}
label img {pointer-events:none;}
</style>
pointer-events 는 IE 11 에서 지원된다.
위 CSS 만으로도 label 안의 img 를 클릭했을 때, 체크박스가 정상 체크되는 것을 확인할 수 있다.
댓글목록
등록된 댓글이 없습니다.