jquery - 使用简单表单自定义 CSS

Question

使用简单形式 ( https://github.com/plataformatec/simple_form ) 并发现很难对 radio 输入进行样式化。我想隐藏标准输入切换开关，并将其替换为使用“标签”的“之前”伪元素的图像。因为 Simple Form 将“输入”INSIDE 发布到“标签”中，所以我无法使用 CSS 将其作为 sibling 访问。由于输入现在是标签的子项。通常标签和输入是 sibling 。

标记:

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

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

CSS 不支持定位 parent 。还试图避免 JS。我如何使用 CSS 自定义这些类似于此外观的输入:http://codepen.io/mitchmc/pen/pebIx

非常感谢您的帮助。谢谢!

Answer 1

真的不知道为什么你只想要它在标签上。以下是您可以在输入本身上执行此操作的方法:

#NDA:checked {
  visibility: hidden;
}
#NDA:checked:before {
  visibility: visible;
  display:block;
  width:24px;
  height:24px;
  position:absolute;
  left:0;
  top:0;
  content: "";
  background: url(https://placekitten.com/25/24) no-repeat;
}

<label class="wrap">
  <input id="NDA" type="radio" value="NDA" />I'm tired.
</label>