html - css 更改复选框和单选按钮不显示任何内容

Question

所以我有一些 css 可以将复选框/单选按钮更改为超棒的字体图标。我之前在不同的元素中使用过它，并且一切正常。但是，我目前正在从事的元素不允许这样做(这是一个带有 Bootstrap 的 opencart 网站)。

这是我的代码(对于复选框来说本质上是一样的，但是它说的不是 radio ，而是复选框哈哈):

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

关于为什么 + 标签不起作用的任何想法？我需要它才能查看是否已选中。

Answer 1

.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