html – 带有可见的隐藏元素：after

我最近创建了一种方式来设置 HTML复选框和单选按钮的样式,但它需要向其添加其他元素,例如< p>或者< 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显示“复选框？”我该如何解决这个问题.这样做会有不同的方法吗？

解决方法

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

另一种方法

无论如何,我有一些像这样的复选框和单选按钮的经验.我学到的一个非常酷的技巧是隐藏< 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,但不幸的是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的任何东西.

html – 带有可见的隐藏元素：after – CSS

解决方法

相关文章