本文介绍了一种巧妙的方法，用于隐藏HTML中的输入元素并将它们置于屏幕之外，同时保持其关联标签的可见性和交互性。这种方法依赖于CSS定位和可见性属性，并通过点击标签元素间接激活输入元素。
我猜这是因为大卫托马斯认为伪元素是不可见的,因为它是’父元素’.它在其他浏览器中工作的原因可以通过不同的实现来解释,其中伪元素可能不被认为是元素的子元素？
另一种方法
无论如何,我有一些像这样的复选框和单选按钮的经验.我学到的一个非常酷的技巧是隐藏< 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>在不同的位置,只要他们仍然是兄弟姐妹.
兼容性
独立此方法与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的任何东西.
扫一扫
6619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
