当输入在标签内时，CSS 复选框和单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13316966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS checkboxes & radio buttons when input is inside label?
提问by Bob Loblaw
I've searched extensively on here for an answer to this but haven't quite come across what I'm looking for. Found this CSS - How to Style a Selected Radio Buttons Label?but the answer involved changing the markup, and that's something I want to avoid which I'll explain below.
我在这里广泛搜索了这个问题的答案，但还没有完全找到我正在寻找的东西。找到了这个CSS - 如何为选定的单选按钮标签设置样式？但答案涉及更改标记，这是我想避免的，我将在下面解释。
I'm trying to add custom css3 checkboxes and radio buttons to my XenForo forum theme, and all the tutorials I've read on this have the label after the input:
我正在尝试将自定义 css3 复选框和单选按钮添加到我的 XenForo 论坛主题中，并且我阅读过的所有教程在输入后都有标签：
<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>
However in XenForo's markup the input is inside the label:
但是，在 XenForo 的标记中，输入位于标签内：
<label for="ctrl_enable_rte">
<input type="checkbox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} />
{xen:phrase use_rich_text_editor_to_create_and_edit_messages}
</label>
I looked into why this is, but didn't find anything related to custom css checkboxes/radio buttons when the markup is this way. I want to avoid having to change the markup, because I'm dealing with a forum system here, and that would involve editing a bunch of core templates... which I'd have to then update the markup on each time the forum software put out an update (presuming the templates changed).
我调查了为什么会这样，但是当标记是这种方式时，没有找到与自定义 css 复选框/单选按钮相关的任何内容。我想避免更改标记，因为我在这里处理一个论坛系统，这将涉及编辑一堆核心模板......然后我必须在每次论坛软件时更新标记发布更新（假设模板已更改）。
I've tried to create CSS rules that would work with this type of markup, but thus far I've been unsuccessful. I'm not too experienced with CSS, don't have every selector memorized, and pseudo classes are still pretty foreign to me, so I was hoping someone here could shed some light on if this will be possible, and if so, how I might go about it. I already have my sprite ready to go, I just need to figure the CSS out.
我曾尝试创建适用于此类标记的 CSS 规则，但到目前为止我一直没有成功。我对 CSS 不太有经验，没有记住每个选择器，而且伪类对我来说仍然很陌生，所以我希望这里有人可以阐明这是否可行，如果可以，我将如何可能会去做。我已经准备好了我的精灵，我只需要弄清楚 CSS。
My main issue is I can't figure out how to select the label (only the labels involved with these inputs of course). Usually something like
我的主要问题是我不知道如何选择标签（当然只有与这些输入相关的标签）。通常像
input[type="checkbox"] + label
is used, but when the label isn't after the input and instead outside/before it... how do I select it?
已使用，但是当标签不在输入之后而是在输入之后/之前......我该如何选择它？
回答by Wesley Murch
If you can edit the markup to wrap the actual label text, for example:
如果您可以编辑标记来包装实际的标签文本，例如：
<label>
<input type="checkbox">
<span>One</span>
</label>
<label>
<input type="checkbox">
<span>Two</span>
</label>
<label>
<input type="checkbox" disabled>
<span>Three</span>
</label>
You can pull off some tricks with CSS:
您可以使用 CSS 实现一些技巧：
label {
position:relative;
cursor:pointer;
}
label [type="checkbox"] {
display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
display:inline-block;
padding:1em;
}
:checked + span {
background:#0f0;
}
[type="checkbox"][disabled] + span {
background:#f00;
}?
Demo: http://jsfiddle.net/dMhDM/1/
演示：http: //jsfiddle.net/dMhDM/1/
Keep in mind that this will fail if the browser doesn't support :checked.
请记住，如果浏览器不支持:checked.
This is basically the same as the other solution, but the stying is done on the span rather than the label.
这与其他解决方案基本相同，但在跨度而不是标签上进行拼接。
回答by Satsangpriyadas Swami
IMHO best way to do this without messing up with html by PURE CSS is
恕我直言，最好的方法是做到这一点，而不会通过 PURE CSS 搞乱 html
input[type="checkbox"] {
position: relative;
cursor: pointer;
padding: 0;
margin-right: 10px;
}
input[type="checkbox"]:before {
content: '';
margin-right: 10px;
display: inline-block;
margin-top: -2px;
width: 20px;
height: 20px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 2px;
}
input[type="checkbox"]:hover:before {
background: #f5821f;
}
input[type="checkbox"]:focus:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
input[type="checkbox"]:checked:before {
background: #f5821f;
border-color: #f5821f;
}
input[type="checkbox"]:disabled {
color: #b8b8b8;
cursor: auto;
}
input[type="checkbox"]:disabled:before {
box-shadow: none;
background: #ddd;
}
input[type="checkbox"]:checked:after {
content: '';
position: absolute;
left: 5px;
top: 8px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
回答by agit
Unfortunately CSS doesn't allow the styling of parent elements based on child elements which would be the easy way example:
不幸的是，CSS 不允许基于子元素的父元素样式，这将是一个简单的方法示例：
div.a < div { border: solid 3px red; }
The opposite of selecting a child based on parent:
与基于父级选择子级相反：
div.a > div { border: solid 3px red; }
What you are wanting to do can be achieved using jQuery.
你想要做的事情可以使用 jQuery 来实现。
Check out thispost.
看看这个帖子。
回答by Madara's Ghost
Very interesting question. Truth be told, I'm pretty sure that's just not possible with CSS alone.
很有趣的问题。说实话，我很确定仅靠 CSS 是不可能的。
If there's some sort of pattern to the label's for attribute (ctrl_enable_rte), there's hope for you. For example, if all checkbox labels end with rte, you could use
如果标签的 for 属性 ( ctrl_enable_rte) 有某种模式，那么您就有希望了。例如，如果所有复选框标签都以 结尾rte，则可以使用
label[for$=rte] { ... }
If there is no such pattern, and the checkbox IDs are chosen arbitrarily, you'll have to resort to JavaScript.
如果没有这样的模式，并且复选框 ID 是任意选择的，则您将不得不求助于 JavaScript。
