css - 无法在 CSS3 中选择同级复选框

Question

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

http://jsfiddle.net/CsMat/

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;- 不要这样做！

这不利于可访问性 - 您正在以屏幕阅读器无法检测到的方式删除元素，这是一个不可以。

相反，您应该在视觉上隐藏该元素。这意味着很多事情，例如偏移输入的位置，使其不在屏幕上并且不可见，或者使用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 及以下，从内存中），不允许标签触发显示：无或可见性：隐藏的输入 - 您需要让它们在技术上“可见”以便可点击的标签（如果您关心这些浏览器）。

Answer 3

嗨@Toby，idee是正确的，您必须使用[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; }