可见的隐藏元素 :after - CSS答案

【问题标题】：Hidden element with visible :after - CSS可见的隐藏元素 :after - CSS
【发布时间】：2013-03-18 21:10:20
【问题描述】：

我最近创建了一种设置 HTML 复选框和单选按钮样式的方法，但它需要向其中添加其他元素，例如 <p> 或 <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 显示“复选框”？我该如何解决这个问题。有没有其他方法可以做到这一点？

【问题讨论】：

问题可能是您实际上是在尝试显示您隐藏的元素的子元素。 Supporting demo，使用opacity。
我认为是这种情况，但 Chrome 似乎很喜欢它。 Firefox 最终会如您所愿地显示它；没有什么。不过我很有希望，哈哈
CSS 解决方案不能跨浏览器工作。 jQuery 或其插件是要走的路。
也许是this explains your problem？它在FF nor IE10 中不起作用。

标签： html css checkbox styling

【解决方案1】：

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

另一种方法

无论如何，我对设置复选框和单选按钮的样式有一些经验。我学到的一个很酷的技巧是将<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 选择器，这意味着选择紧跟a 的b。所以<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 (

【讨论】：