我猜這是因為大衛托馬斯認為偽元素是不可見的,因為它是’父元素’.它在其他瀏覽器中工作的原因可以通過不同的實現來解釋,其中偽元素可能不被認為是元素的子元素？

另一種方法

無論如何,我有一些像這樣的復選框和單選按鈕的經驗.我學到的一個非常酷的技巧是隱藏< input>關閉屏幕并設置關聯的< label>用一些花哨的選擇器技巧.此方法利用了點擊< label>的事實.還會點擊相關的< input>.

HTML

CSS

input[type="checkBox"] {

position:absolute;

left:-9999px;

top:-9999px;

}

input[type="checkBox"] + label {

visibility:visible;

content:"W";

display:block;

background:#0ab9bf;

width:20px;

line-height:20px;

text-align:center;

height:20px;

overflow:hidden;

}

input[type="checkBox"]:checked + label {

background:#F00;

}

改進方法

這個方法使用a b選擇器,這意味著選擇b緊跟在a之后.那么< label>必須在< input>之后.一種“更安全”的方法是使用通用兄弟選擇器a~b將它們包裝在容器和樣式中.然后,樣式將容忍< label>在不同的位置,只要他們仍然是兄弟姐妹.

It will still work!

兼容性

獨立此方法與IE8及以下版本不兼容,因為它不支持：已選中.解決這個問題的通常方法是添加一個類.checked,但不幸的是IE8在更改類時也有一個rendering bug,而你需要更多hacky JavaScript.

var labels = document.querySelectorAll('label');

for (var i = 0; i < labels.length; i++) {

labels[i].onclick = handleClick;

}

function handleClick () {

var checkBox = document.getElementById(this.getAttribute('for'));

// do something with checkBox.checked

alert(checkBox.checked);

}

幸運的是,由于now tiny market share(<0.77％),你不需要支持低于8的任何東西.

總結

以上是生活随笔為你收集整理的HTML label的隐藏,html – 带有可见的隐藏元素：after – CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。