CSS를 만들려면 : 후/: 레이블 요소

Question

안녕에 콘텐츠 클릭하기 전에 나는이 html 코드를 가지고 :

<input type="checkbox" id="button2"> 
<label for="button2">something here</label> 

그래서 아이디어는 내가 레이블을 클릭하면, 체크 박스가 활성화 될 것입니다 . 나는 물론이 CSS를

label:before{ 
    content:'some content'; 
... 
} 

를 추가하면 지금은 내 자신을 설명하기 위해, CSS는하지만, 단지 간단한 예를 통해이를 추가 할 이유가 없다는 것을 알고있다.

이제 'css'로 생성 된 '일부 콘텐츠'를 클릭 할 수 있기를 원하며 레이블과 동일한 효과를 얻길 바랍니다. 그래서 '일부 콘텐츠'를 클릭하면 확인란이 활성화됩니다. 그

감사

Answer 1

이 모든 브라우저에서 작업을 수행을 수행 할 수 있습니다 (FX는, IE, 오페라) 크롬과 사파리의 예외. 분명히 WebKit 관련 버그입니다.

그러나 버그는 LABEL에 대해 display: inline-block 또는 display: block (구체적인 경우에 따라 적절)을 지정하여 해결할 수 있습니다.

Answer 2

이 문제를 해결하려면 레이블 내용을 레이블 안에 넣고 대신 :before 스타일을 적용하십시오. 그런 식으로 :before에 의해 추가 된 콘텐츠는 여전히 라벨 안에 있습니다.

<input type="checkbox" id="button2"> 
<label for="button2"><span>something here</span></label> 


label>span:before{ 
    content:'some content'; 
    ... 
} 

마크 업을 추가하기 때문에 이상적이지는 않지만 그 트릭을 수행해야합니다.

희망이 있습니다.