隐藏元素与可见：后

我最近创建了一种设置HTML复选框和单选按钮样式的方法，但它需要向它添加其他元素，如<p>或<span> 。 这并不是很不方便，但是当你为一个完整的web软件造型（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显示“复选框？” 我该如何解决这个问题。 有没有不同的方式去做到这一点？

---

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

另一种方法

无论如何，我有一些体验复选框和单选按钮的体验。 我学到了一个非常酷的技巧，就是隐藏<input> off屏幕，并用一些花哨的选择器技巧设置相关的<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“更安全”的方式来做到这将是采用一般兄弟选择来包装他们在一个集装箱和风格a ~ b 。 如果样式仍然是兄弟姐妹，样式将允许<label>在不同的位置。

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

兼容性

独立此方法与IE8及以下版本不兼容，因为它不支持:checked 。 解决这个问题的常用方法是添加一个.checked类，但不幸的是，IE8在更改类时也存在渲染错误，并且需要更多的黑客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的任何内容。

链接地址: http://www.djcxy.com/p/10805.html

上一篇: Hidden element with visible :after

下一篇: Why does this method cause Code Analysis error CA2000: Call Dispose()