CSS 입력 [type = checkbox] : 체크 박스

왜 이것이 나를 위해 작동하지 않는지 알아 내려고 노력했습니다. 내가 체크했을 때 배경의 위치를 바꾸고 싶은 CSS 체크 박스가있다. 누군가 왜 이것이 작동하지 않는지 말해 줄 수 있습니까? 여기 CSS 입력 [type = checkbox] : 체크 박스

는 원래 코드 : HTML

<input type="checkbox" /> 
<label>Flight</label>

CSS는

input[type=checkbox]{ 
display: none; 
} 


input[type=checkbox] + label{ 
display: inline-block; 
width: 32px; 
height: 32px; 
padding-left: 40px; 
background-position: 0 0; 
background-repeat: no-repeat; 
line-height: 32px; 
cursor: pointer; 
} 

input[type=checkbox]:checked + label{ 
background-position: left -32px; 
} 

label{ 
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_d2a60beb8fb6bbb280642579049ebf65.png); 
}

여기

Demo

고정 코드 :

HTML

<input type="checkbox" id="travel_check" /> 
<label for="travel_check">Flight</label>

출처

2013-10-14 Colbyd

어디에서 중괄호를 사용할 수 있습니까? –

당신의 코드 code 코드는'input {type = checkbox} : checkbox' 셀렉터를 가지고 있지 않습니다. 당신은 실제로 무엇을 묻고 계십니까? – Bojangles

@ ÁlvaroG.Vicario 어떤 방식 으로든 중괄호를 사용 하시겠습니까? 정교하게 써 주시겠습니까? – Colbyd

레이블이 확인란을 가리 키도록 정의되지 않았습니다. 이 경우 체크 박스에 id이 있어야하고 라벨에 해당하는 for이 있어야합니다.

http://codepen.io/anon/pen/Eauxc

출처

2013-10-14 14:31:32

감사합니다! 나는 아이디와 아이디가 필요하다는 것을 알지 못했다. – Colbyd

나는 혼란 스럽다. 원래 코드는 이미 그 코드를 가지고있는 것 같습니다. –

@ ÁlvaroG.Vicario 편집하기 전에 거기에 있던 codepen 링크를 클릭했을 때 ... –

CSS 입력 [type = checkbox] : 체크 박스

답변

관련 문제