Jquery 具有简单表单的自定义CSS

使用simpleform（）并发现很难对无线电输入进行样式化。我想隐藏标准输入切换，并将其替换为使用“label”的“before”伪元素的图像。因为Simple Form在“label”内部发布“input”，所以我无法使用CSS作为同级访问它。因为输入现在是标签的子项。通常，标签和输入是同级的

标记：

<label class="boolean required" for="rfq_nda_accepted">
  <input class="boolean required" type="checkbox" value="1" name="rfq[nda_accepted]" id="rfq_nda_accepted">
  <abbr title="required">*</abbr> I agree to NDA
</label>

CSS不支持以父母为目标。还试图避免JS。我如何使用CSS自定义这些类似于此外观的输入：

---

非常感谢您的帮助。谢谢

请检查CSS复选框，希望这就是您要查找的内容

input[type=“checkbox”]{
显示：无；
}
标签：：之后{
内容：“；
显示：块；
宽度：19px；
高度：19px；
保证金：-1px4p0；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：2px；
边界半径：2px；
边框：1px实心#ccc；
颜色：#292321；
字体系列：Arial，无衬线；
字体大小：14px；
浮动：左；
背景色：#FFF；
-webkit过渡：背景色0.4s线性；
-o过渡：背景色0.4s线性；
-moz过渡：背景色0.4s线性；
过渡：背景色0.4s线性；
}
标签：active:：after，标签：focus:：after{
内容：“；
显示：无；
}
标签：active:：before，标签：focus:：before{
内容：“；
显示：块；
宽度：19px；
高度：19px；
保证金：-1px4p0；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：2px；
边界半径：2px；
边框：1px实心#ccc；
颜色：#292321；
字体系列：Arial，无衬线；
字体大小：14px；
浮动：左；
背景色：#292321；
}

*我同意保密协议

我真的不知道为什么你只想把它贴在标签上。以下是如何在输入本身上执行此操作：

#NDA:已选中{
可见性：隐藏；
}
#NDA：检查：之前{
能见度：可见；
显示：块；
宽度：24px；
高度：24px；
位置：绝对位置；
左：0；
排名：0；
内容：“；
背景：url(https://placekitten.com/25/24)不重复；
}

我累了。

谢谢您的发帖。标记是动态生成的，因此我不能简单地在标签中添加span或div。我基本上是想弄清楚如何仅使用CSS根据输入条件（是否选中）与标签对话。这有意义吗？想象一下，您无法更改标记，只能使用css与它对话。谢谢。好的，如果你有权访问任何JS，你可以放置一个span。我不会说这是一件好作品，但它将在FF的工作，现在。这只是知识，不能对上述代码片段进行实际使用。对不起，非常感谢你的帮助！尽量避免与唯一id（#NDA）的任何直接通信，因为我希望这些输入样式是基本（全局）css更改。但是，更改输入而不是标签是非常棒的！不知道我为什么要专注于标签。这是很大的帮助@user2963256我仅使用ID作为示例。你没有理由不轻易地将它从

#NDA

更改为

input[type=“radio”]

lol很高兴它对你有帮助，而这正是我所做的！：）德瑞克，这里可能需要你的帮助。在Firefox中，伪元素不能覆盖元素可见性。因此，不可见元素意味着其伪元素（如：before）不能用可见性：可见：(

input[type="radio"]:checked + label