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

Question

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

这是我的代码（对于复选框来说基本上是一样的，但是它说的不是无线电，而是复选框哈哈）：

.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 select 或用于 select 紧跟在第一个指定元素之后（而非内部）的元素。

参考：https://www.w3schools.com/cssref/sel_element_pluss.asp

Answer 2

如果添加 + 选择器，则需要在单选按钮后立即添加标签。如果你想要一些结构代码而不是在单选按钮之后添加 span 和 + css。

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

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

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

Answer 3

从选择器中删除 input[type=radio] + 部分，如下所示：

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

.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 label::before {
  content: '\f192';
  color: #000
}

<div class="radio" style="margin-left:50px;">
  <label>
        <input name="option[240]" value="34" type="radio"> White
    </label>
</div>

Answer 4

.checkbox,
.radio{
 position: relative;
 padding-left: 10px;
}

.checkbox input[type='checkbox'],
.radio input[type='radio'] {
  opacity:0;
  visibility: hidden;
  margin: 0
}

.radio input[type=radio]+i,
.checkbox input[type=checkbox]+i{
  position: absolute;
  top: 0;
 left: 0;
  border: 2px solid #000;
  width: 10px;
  height: 10px;
  display: inline block;
}
.radio input[type=radio]+i::before,
.checkbox input[type=checkbox]+i::before{
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 height: 0;
 width: 0;
 border: 3px solid red;
 margin: -3px 0 0 -3px;
  display:none;
}

.radio input[type=radio]+i,
.radio input[type=radio]+i::before{
 border-radius: 50%;
}
.radio input[type=radio]:checked+i,
.radio input[type=radio]:checked+i::before,
.checkbox input[type=checkbox]:checked+i,
.checkbox input[type=checkbox]:checked+i::before{
  border-color: red;
  display: inline-block;
}

<div class="radio">
  <label for="myRadio">
    <input name="option[240]" id="myRadio" value="34" type="radio">
    <i></i>White
  </label>
</div>
<div class="checkbox">
  <label for="myCheckbox">
    <input name="option[241]" id="myCheckbox" value="34" type="checkbox">
    <i></i>Black
  </label>
</div>

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

css changing checkbox and radio buttons displaying nothing

html

css

checkbox

radio