所以我有一些css,它将复选框/单选按钮更改为字体很棒的图标。我以前在不同的项目上用过,效果都很好。但是,我目前正在进行的项目不允许这样做(它是一个opencart站点,带有引导程序)。
这是我的代码(checkbox基本上是一样的,但不是radio,而是checkbox lol):

.checkbox input[type='checkbox'],
.radio input[type='radio'] {
  position: relative;
  display: none;
  margin-left: 0
}

.radio input[type=radio]+label::before {
  content: '\f10c';
  position: absolute;
  top: 0;
  margin-left: -20px;
  font-family: 'FontAwesome';
  font-size: 115%;
  display: inline-block;
  letter-spacing: .75em
}

.radio input[type=radio]:checked+label::before {
  content: '\f192';
  color: #000
}

<div class="radio">
  <label>
    <input name="option[240]" value="34" type="radio"> White
  </label>
</div>

关于为什么+label不起作用有什么想法吗?我需要它能看到它是否被检查过。

最佳答案

.checkbox input[type='checkbox'],
.radio input[type='radio'] {
  position: relative;
  display: none;
  //margin-left: 0
}
.radio input[type=radio]+label::before {
  content: '\f10c';
  font-family: 'FontAwesome';
  font-size: 115%;
  display: inline-block;
  letter-spacing: .75em
}

.radio input[type=radio]:checked+label::before {
  content: '\f192';
  color: red;
}

<div class="radio">
   <input name="option[240]" value="34" type="radio" id="rad" />
   <label for="rad">White</label>
</div>

+CSS选择器用于选择紧跟在第一个指定元素之后(而不是在元素内部)的元素。
参考:https://www.w3schools.com/cssref/sel_element_pluss.asp

10-05 20:35
查看更多