隐藏元素与可见:后 - CSS

Question

我最近创建了一种方式来设置HTML复选框和单选按钮的样式,但它需要添加其他元素,如a <p>或a <span>.这并不是一件非常不方便的事情,但是当你为一个完整的网络软件设计样式(CSS)时,必须返回并重写每个复选框都会很烦人.

我最近刚刚有一个关于如何在不使用任何其他元素的情况下对其进行样式化的"启示",并且它在Chrome中运行得非常好,但在Firefox中,我们只是说它不起作用.

我的HTML:

<input type="checkbox" />

我的CSS:

input[type="checkbox"]
{
    visibility:hidden;
}

input[type="checkbox"]:after
{
    visibility:visible;
    content:"W";
    display:block;
    background:#0ab9bf;
    width:20px;
    line-height:20px;
    text-align:center;
    height:20px;
    overflow:hidden;
    text-indent:-100px;
}

input[type="checkbox"]:checked:after
{
    text-indent:0;
}

我希望有人可以帮忙吗？请记住,我正在寻找一个严格的CSS解决方案.我将只作为最后的手段寻求一个JavaScript解决方案.在那之前,我的希望很高.

我想我的问题是,是什么阻止Firefox显示"复选框？" 我该如何解决这个问题.有没有不同的方法去做这个？

Answer 1

我猜这是大卫·托马斯（David Thomas）建议的，伪元素不可见，因为它是“父”元素。它在其他浏览器中工作的原因可以通过不同的实现来解释，其中伪元素可能不被视为元素的子元素？

另一种方法

不管怎样，我在设计像这样的复选框和单选按钮样式方面有一些经验。我学到的一个很酷的技巧是隐藏<input>屏幕外并设置与一些花哨的选择器技巧相关的样式<label>。此方法利用了以下事实：单击<label>也将单击关联的<input>。

jsFiddle

超文本标记语言

<input type="checkbox" id="check" />
<label for="check"></label>

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>处于不同的位置。

<div>
    <input type="checkbox" id="check" />
    <div>It will still work!</div>
    <label for="check"></label>
</div>

兼容性

Standalone 此方法不兼容 IE8 及以下版本，因为它不支持:checked. 解决这个问题的通常方法是添加一个类.checked，但不幸的是 IE8 在更改类时也有一个渲染错误，并且您需要更多的 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);
}

幸运的是，您不需要支持低于 8 的任何内容，因为它现在的市场份额很小（< 0.77%）。