我已经在这里广泛搜索了这个问题的答案,但还没有找到我想要的答案。找到了这个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
但当标签不在输入之后,而是在输入之外/之前时...如何选择它?
5条答案
按热度按时间llycmphe1#
如果可以编辑标注以换行实际标签文本,例如:
您可以使用CSS实现一些技巧:
演示:
一个二个一个一个
http://jsfiddle.net/dMhDM/1/
请记住,如果浏览器不支持
:checked
,此操作将失败。这基本上与其他解决方案相同,但stying是在跨度上而不是标签上完成的。
mccptt672#
恕我直言,最好的方法来做到这一点,而不是搞砸了html的纯CSS是
t2a7ltrp3#
不幸的是,CSS不允许基于子元素的父元素样式,这是一个简单的方法示例:
与基于父对象选择子对象相反:
您想要做的事情可以使用jQuery来实现。
看看this帖子。
2w2cym1i4#
非常有趣的问题。说实话,我非常肯定这仅仅是CSS不可能做到的。
如果标签的for属性(
ctrl_enable_rte
)有某种模式,那么您就有希望了。例如,如果所有复选框标签都以rte
结尾,那么您可以使用如果没有这样的模式,并且复选框ID是任意选择的,则必须求助于JavaScript。
fnx2tebb5#
我也面临着同样的问题,并且已经想出了解决这个问题的办法。
因此,我们可以根据问题选择输入的父标签,方法是使用**:has()CSS伪类**。
这是CSS中一个非常新的选择器。所以,请检查https://caniuse.com/css-has