CSS更改复选框和单选按钮不显示答案

【问题标题】：css changing checkbox and radio buttons displaying nothingCSS更改复选框和单选按钮不显示
【发布时间】：2018-02-24 05:00:54
【问题描述】：

所以我有一些 css 可以将复选框/单选按钮更改为字体真棒图标。我以前在不同的项目中使用过它，一切都很好。但是，我目前正在进行的项目不允许这样做（它是一个 opencart 站点，带有引导程序）。

这是我的代码（复选框本质上是相同的，但它不是收音机，而是复选框大声笑）：

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

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

【问题讨论】：

+ 是相邻的兄弟选择器。它将只选择紧跟前一个指定元素的指定元素。
啊，是的，我刚刚意识到收音机在标签内.. 真是漫长的一天叹息谢谢！

标签： html css checkbox radio

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：