CSSを作成する方法：の後に/：label要素

Question

こんにちは上のコンテンツクリッカブル前に私はこのhtmlコードを持っている：

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

だから、アイデアは、私がラベルをクリックすると、チェックボックスがアクティブ化されようとしているあります。私はもちろん、このCSSに

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

を追加する場合、今私は私が自分自身を説明するために、CSSちょうど簡単な例を通じてそのを追加する理由がないことを知っています。

今、私は生成された 'some content'をクリックできるようにしたいと思っています。私はそれをラベルと同じ効果にしたいと思います。だから私は 'いくつかのコンテンツ'をクリックするとチェックボックスがアクティブになります。それは、これはChromeとSafariのは例外のためにすべてのブラウザ（為替、IE、オペラ）で働くん

おかげ

Answer 1

を行うことができます。明らかに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'; 
    ... 
} 

マークアップが余計に追加されるため理想的ではありませんが、それはあなたのためのトリックです。

希望に役立ちます。