Question

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

我最近刚刚得到了一个＆＃34;启示＆＃34;关于如何在不使用任何其他元素的情况下对它们进行样式化，并且它在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显示＆＃34;复选框？＆＃34;我该如何解决这个问题。有没有不同的方法来做这件事？

Answer 1

我猜这是因为大卫托马斯建议伪元素因为它是'父'元素而不可见。它在其他浏览器中工作的原因可以用不同的实现来解释，其中伪元素不被视为元素的子元素吗？

另一种方法

无论如何，我有一些像这样的复选框和单选按钮的经验。我学到的一个非常酷的技巧是隐藏<input>关闭屏幕，并使用一些花哨的选择器技巧为关联的<label>设置样式。此方法利用点击<label>也会点击关联的<input>这一事实。

jsFiddle

HTML

<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>

兼容性

独立此方法与IE8及以下版本不兼容，因为它不支持:checked。解决这个问题的常用方法是添加一个类.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的任何东西。

隐藏元素与可见：后 - CSS

1 个答案:

另一种方法

HTML

CSS

改进方法

兼容性