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

问题描述

我在这里广泛搜索了这个问题的答案，但还没有完全找到我正在寻找的东西.找到这个 CSS - 如何为选定的单选按钮标签设置样式? 但答案涉及更改标记，这是我想避免的事情，我将在下面解释.

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.

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

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>

但在 XenForo 的标记中，输入位于标签内:

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>

我研究了为什么会这样，但是当标记是这种方式时，没有找到与自定义 CSS 复选框/单选按钮相关的任何内容.我想避免更改标记，因为我在这里处理的是一个论坛系统，这将涉及编辑一堆核心模板......然后我必须在每次论坛软件时更新标记发布更新(假设模板已更改).

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 规则，但到目前为止我还没有成功.我对 CSS 不太熟悉，没有记住每个选择器，而且伪类对我来说仍然很陌生，所以我希望这里有人能说明这是否可行，如果可以，我是如何做到的可能会去做.我的精灵已经准备好了，我只需要弄清楚 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.

我的主要问题是我不知道如何选择标签(当然只有与这些输入相关的标签).通常类似

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>

您可以使用 CSS 实现一些技巧:

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;  
}​

演示:

label {
  position: relative;
  cursor: pointer;
}

label [type="checkbox"] {
  display: none;
}

[type="checkbox"]+span {
  display: inline-block;
  padding: 1em;
}

:checked+span {
  background: #0f0;
  display: inline-block;
}

[type="checkbox"][disabled]+span {
  background: #f00;
}

<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>

http://jsfiddle.net/dMhDM/1/

请记住，如果浏览器不支持 :checked，这将失败.

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

这与其他解决方案基本相同，但stying是在span而不是label上完成的.

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

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