所以我有一些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