Question

我正在使用CSS3选择器来生成用于样式单选按钮的跨浏览器解决方案。我的解决方案也必须是免费的。一切正常，但单选按钮未隐藏 - 我无法通过label~input选择它，尽管input~label完美无缺。谁能告诉我哪里出错了？

HTML

<div>
  <input id="click-1" type="radio" value="1" name="clickMe" />
  <label for="click-1">Click me!</label>
</div>

CSS

div {position:relative}
label ~ input {display:none}
input ~ label {padding:0 0 0 25px;}
label:before{border-radius:20px; background:blue; content:''; display:block; position:absolute; left: 0; top: 0; height:20px; width:20px;}
input:checked + label:before{background:red;}

Answer 1

继续我对原始问题的评论（你不能选择前面的兄弟姐妹）：

我看到很多答案都被发布到你只是使用display: none;隐藏单选按钮 - 不要这样做！

这对于可访问性来说是不好的 - 您正在以屏幕阅读器未检测到的方式删除元素，这是NO-NO。

相反，您应该在视觉上隐藏元素。这意味着许多事情，例如偏移输入的位置，使其离开屏幕而不可见，或者使用clip属性来隐藏元素。

在您的情况下，我会建议使用此标记：

<div class="field">
    <input id="click-1" type="radio" value="1" name="clickMe">
    <label for="click-1">Click me!</label>
</div><!-- .field -->

你的CSS将是：

/* This method, though more lines of code, visually hides the element from the page but keeps it in the DOM to be accessible by screen readers */
.field input[type=radio] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.field input[type=radio] ~ label {
    /* Your label code here */
}

在此处了解您不应使用display: none;的原因：http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

无耻的自我插件：http://hieroishere.com/flatui/

我已经使用了基础知识来创建视觉上吸引人的表单元素。

享受：）

Answer 2

我处理这个问题的方法是对包含div进行分类，然后根据它构建你的选择器：

HTML：

<div class="field easy-toggle">
  <input id="click-1" type="radio" value="1" name="clickMe" />
  <label for="click-1">Click me!</label>
</div>

CSS：

.easy-toggle input {
    opacity: 0.01;
    position: absolute;
    left: -9999em;
}

这里的基本原理是包含元素成为你正在构造的标记的“单元” - 单元上的一个或多个类告诉它内部的其他内容如何显示。它确实增加了一个额外的元素，但它增加的可重用性和清晰度超过了它。

此处发生的另一件事是旧的Internet Explorer（8及以下，来自内存）不允许标签触发显示的输入：none或visibility：hidden - 你需要让它们在技术上“可见”为了使标签可以点击（如果你关心那些浏览器）。

Answer 3

嗨@Toby，这个想法是正确的你必须使用[id=click-1]和/或[for=click-1]

选项1：

加价：

    <div>
        <input id="click-1" type="radio" value="1" name="clickMe" />
        <label for="click-1">Click me!</label>
    </div>
    <div>  
        <input id="click-2" type="radio" value="1" name="clickMe" />
        <label for="click-2">Click me!</label>
    </div>
    <div>  


    <input id="click-3" type="radio" value="1" name="clickMe" />
    <label for="click-3">Click me!</label>
</div>

风格：

div {position:relative;margin: 20px 0 0 0; }
input[type=radio] {display:none}
div label {padding:0 0 0 25px;}
label:before{border-radius:20px; background:blue; content:''; display:block; position:absolute; left: 0; top: 0; height:20px; width:20px; opacity:0.2}
input[id=click-1]:checked + label[for=click-1]:before{background:red!important;}
input[id=click-2]:checked + label[for=click-2]:before{background:black!important;}
input[id=click-3]:checked + label[for=click-3]:before{background:green!important;}

演示：http://jsfiddle.net/CsMat/3/

选项2：

加价：

<div>
    <input id="click-1" type="radio" value="1" name="clickMe" />
    <label for="click-1">Click me!</label>
</div>
<div>  
    <input id="click-2" type="radio" value="1" name="clickMe" />
    <label for="click-2">Click me!</label>
</div>
<div>   
    <input id="click-3" type="radio" value="1" name="clickMe" />
    <label for="click-3">Click me!</label>
</div>

风格：

div {position:relative;margin: 20px 0 0 0; }
input[type=radio] {display:none}
div label {padding:0 0 0 25px;}
label:before{border-radius:20px; background:blue; content:''; display:block; position:absolute; left: 0; top: 0; height:20px; width:20px; opacity:0.2}
input[id=click-1]:checked + label:before{background:red!important;}
input[id=click-2]:checked + label:before{background:black!important;}
input[id=click-3]:checked + label:before{background:green!important;}

演示：http://jsfiddle.net/CsMat/4/

选项3：

加价：

<input id="click-1" type="radio" value="1" name="clickMe" />
<input id="click-2" type="radio" value="1" name="clickMe" />
<input id="click-3" type="radio" value="1" name="clickMe" />
<div>
    <label for="click-1">Click me!</label>
</div>
<div>  
    <label for="click-2">Click me!</label>
</div>
<div>   
    <label for="click-3">Click me!</label>
</div>

风格：

div {position:relative;margin: 20px 0 0 0; }
input[type=radio] {display:none}
div label {padding:0 0 0 25px;}
label:before{border-radius:20px; background:blue; content:''; display:block; position:absolute; left: 0; top: 0; height:20px; width:20px; opacity:0.2}
input[id=click-1]:checked ~ div label[for=click-1]:before{background:red!important;}
input[id=click-2]:checked ~ div label[for=click-2]:before{background:black!important;}
input[id=click-3]:checked ~ div label[for=click-3]:before{background:green!important;}

演示： http://jsfiddle.net/CsMat/2/

Answer 4

就像@ ninty9notout所说，你不能使用兄弟选择器来获得前面的选择器，只能使用下面的选择器。所以，你也可以：

div label { display: none; }

无法选择CSS3中的兄弟复选框

4 个答案: