CSS复选框和单选按钮时,输入是在标签内?

fd3cxomn  于 2022-12-24  发布在  其他
关注(0)|答案(5)|浏览(164)

我已经在这里广泛搜索了这个问题的答案,但还没有找到我想要的答案。找到了这个CSS - How to Style a Selected Radio Buttons Label?,但答案涉及到修改标记,这是我想避免的,我将在下面解释。
我尝试将自定义css3复选框和单选按钮添加到我的XenForo论坛主题,我读过的所有教程在输入后都有标签:

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</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>

我研究了一下为什么会这样,但是没有发现任何与自定义css复选框/单选按钮相关的东西,当标记是这样的时候,我想避免改变标记,因为我在这里处理一个论坛系统,这将涉及到编辑一堆核心模板......每次论坛软件发布更新时,我都必须更新标记(假设模板改变了)。
我试过创建CSS规则来处理这种类型的标记,但是到目前为止我还没有成功。我对CSS不是很有经验,没有记住每一个选择器,伪类对我来说还是很陌生的,所以我希望这里的人能给我一些启示,如果这是可能的,如果是的话,我会怎么做。我已经准备好了我的sprite。我只需要弄清楚CSS。
我的主要问题是我不知道如何选择标签(当然,只有与这些输入相关的标签)。

input[type="checkbox"] + label

但当标签不在输入之后,而是在输入之外/之前时...如何选择它?

llycmphe

llycmphe1#

如果可以编辑标注以换行实际标签文本,例如:

<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实现一些技巧:

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

演示:
一个二个一个一个
http://jsfiddle.net/dMhDM/1/
请记住,如果浏览器不支持:checked,此操作将失败。
这基本上与其他解决方案相同,但stying是在跨度上而不是标签上完成的。

mccptt67

mccptt672#

恕我直言,最好的方法来做到这一点,而不是搞砸了html的纯CSS是

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);
}
t2a7ltrp

t2a7ltrp3#

不幸的是,CSS不允许基于子元素的父元素样式,这是一个简单的方法示例:

div.a < div { border: solid 3px red; }

与基于父对象选择子对象相反:

div.a > div { border: solid 3px red; }

您想要做的事情可以使用jQuery来实现。
看看this帖子。

2w2cym1i

2w2cym1i4#

非常有趣的问题。说实话,我非常肯定这仅仅是CSS不可能做到的。
如果标签的for属性(ctrl_enable_rte)有某种模式,那么您就有希望了。例如,如果所有复选框标签都以rte结尾,那么您可以使用

label[for$=rte] { ... }

如果没有这样的模式,并且复选框ID是任意选择的,则必须求助于JavaScript。

fnx2tebb

fnx2tebb5#

我也面临着同样的问题,并且已经想出了解决这个问题的办法。
因此,我们可以根据问题选择输入的父标签,方法是使用**:has()CSS伪类**。

label:has(input[type="checkbox"]) {
  font-weight: bold;
}
<label>
  <input type="checkbox" />
  Label
</label>

这是CSS中一个非常新的选择器。所以,请检查https://caniuse.com/css-has

相关问题