Question

所以我有一些css将复选框/单选按钮更改为字体很棒的图标。我以前在不同的项目中使用它，并且一切正常。但是，我目前正在进行的项目是不允许的（它是一个开放式网站，带有引导程序）。

这是我的代码（对于复选框，它基本上是相同的，但它不是收音机，而是复选框lol）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: