8

我最近创建了一种设置 HTML 复选框和单选按钮样式的方法，但它需要向其中添加其他元素，例如 a<p>或 a <span>。这不是很不方便，但是当您设计 (CSS) 一个完整的 Web 软件时，不得不返回并重写每个复选框可能会很烦人。

我最近刚刚获得了关于如何在不使用任何其他元素的情况下为其设置样式的“启示”，它在 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 显示“复选框”？我该如何解决这个问题。有没有不同的方法可以做到这一点？

4

1 回答 1

3

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

另一种方法

无论如何，我在设计复选框和单选按钮方面有一些经验。我学到的一个很酷的技巧是隐藏<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 在更改类时也有一个渲染错误，您需要更多 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);
}

幸运的是，由于其现在的市场份额很小（< 0.77%），您不需要支持低于 8 的任何东西。

于 2013-03-18T13:10:20.387 回答