Question

使用简单表格（https://github.com/plataformatec/simple_form）并发现难以对收音机输入进行样式化。我想隐藏标准输入切换，并使用'标签'的'before'伪元素将其替换为图像。因为Simple Form发布了'input' INSIDE 'label'，所以我无法使用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：

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

CSS不支持定位父母。也试图避免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>

Answer 2

请使用CSS查看复选框，希望这是您要找的内容。

input[type="checkbox"]{
	display:none;
}

label::after {
  content:" ";
  display: block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #ccc;
   color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
  float: left;
  background-color: #FFF;
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}
label:active::after,label:focus::after {
	content:"";
	display:none;
}

label:active::before, label:focus::before  {
  content:" ";
  display: block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
  float: left;
  background-color: #292321;
}

<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

2 个答案: