CSS复选框&单选按钮当输入是在标签内？ [英] CSS checkboxes & radio buttons when input is inside label?

问题描述

我在这里搜索了很多，但是没有找到我想要的答案。找到此 CSS - 如何制作所选单选按钮标签？但答案涉及更改标记，这是我想避免的，我将在下面解释。

我试图添加自定义css3复选框和单选按钮到我的XenForo论坛主题，并且我阅读的所有教程在输入后都有标签：

 < ; input type =checkboxid =c1name =cc/> 
< label for =c1>复选框1< / label> 
 

但是在XenForo的标记中，输入在标签内：

 < label for =ctrl_enable_rte> 
< input type =checkboxname =enable_rtevalue =1id =ctrl_enable_rte{xen：checked{$ visitor.enable_rte}} /> 
 {xen：phrase use_rich_text_editor_to_create_and_edit_messages} 
< / label> 
  

我看了为什么是这样，但没有找到任何与自定义CSS相关的复选框/单选按钮当标记是这样的。我想避免改变标记，因为我在这里处理一个论坛系统，这将涉及编辑一堆核心模板...我必须更新标记每次论坛软件输出更新（假定模板已更改）。

我试图创建的CSS规则将使用这种类型的标记，但到目前为止，我已经不成功。我对CSS没有太多的经验，没有记住每一个选择器，伪类对我来说还是相当陌生的，所以我希望有人在这里可以揭开一些光如果这将是可能的，如果是这样，我怎么样可能会去。

我的主要问题是我不知道如何选择标签（只有当然包括这些输入的标签）。通常为

  input [type =checkbox] + label 
 使用pre> 
 
 
，但是当标签不在输入之后，而是在其之前/之前...如何选择它？
解决方案
如果您可以编辑标记以包装实际的标签文本，例如：
 < label> 
< input type =checkbox> 
< span>一个< / span> 
< / label> 
< label> 
< input type =checkbox> 
< span>两个< / span> 
< / label> 
< label> 
< input type =checkboxdisabled> 
< span>三< / span> 
< / label> 
  
您可以使用CSS剔除一些技巧：
 标签{
 position：relative; 
 cursor：pointer; 
} 
 label [type =checkbox] {
 display：none; / *使用你的自定义精灵代替作为跨度的背景* / 
} 
 [type =checkbox] + span {
 display：inline-block; 
 padding：1em; 
} 
：checked + span {
 background：＃0f0; 
} 
 [type =checkbox] [disabled] + span {
 background：＃f00; 
} 
  
演示： http://jsfiddle.net/dMhDM/1/  
 
 
 
请记住，如果浏览器不支持：checked 。 
 
 
 
这基本上与其他解决方案相同，但是停顿是在跨度而不是标签上完成的。
 
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.

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:
<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:
<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).

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.

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?
解决方案
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:
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/

Keep in mind that this will fail if the browser doesn't support :checked. 

This is basically the same as the other solution, but the stying is done on the span rather than the label.

                        
这篇关于CSS复选框&amp;单选按钮当输入是在标签内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！