2012-02-25 95 views
1

喜上的內容可點擊之前,我有這樣的HTML代碼:如何讓CSS:後/:標籤元素

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

這樣的想法是,當我點擊標籤上,該複選框將被激活。現在,如果我加入這個CSS

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

我當然知道,沒有理由要補充一點,通過CSS只是一個簡單的例子,幫我解釋一下。

現在我想能夠點擊'一些內容'生成將CSS,我希望它具有與標籤相同的效果。所以當我點擊'某些內容'時,複選框將被激活。可以在完成

感謝

+0

我會建議使用Javascript,我認爲這可能有些可能,但它肯定不會是瀏覽器兼容的。 – 2012-02-25 21:38:21

+0

@DylanCross我同意,但這不會是任何重要的網站 - 我只是想了解這個(一種個人教程) – aurel 2012-02-25 22:49:16

回答

4

這並不在所有的瀏覽器(匯率,IE,Opera)的Chrome和Safari的除外。這顯然是一個WebKit特定的錯誤。

但是該錯誤可以通過指定display: inline-blockdisplay: block(取決於您的具體情況更適合)LABEL來解決。

1

要解決此問題,您可以嘗試將標籤內容跨度放在標籤內,並將:before樣式應用於跨距。這樣,由:before添加的內容仍將位於標籤內。

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


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

不理想,因爲它增加了額外的標記,但它應該爲你做詭計。

希望有所幫助。

+0

嗚呼!我已經有了標籤內的元素。很棒! – 2015-05-17 02:04:11