css changing checkbox and radio buttons displaying nothing

html css checkbox radio

300 观看

4回复

603 作者的声誉

So I've got some css which changes checkbox / radio buttons to be font-awesome icons. I've used it on different projects before, and it's all worked fine. However, the project I'm currently working on, is not allowing it (it's an opencart site, with bootstrap).

Here's my code (it's essentially the same for checkbox, but instead of radio it says 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>

Any ideas on why + label isn't working? I'd need it to be able to see if it's checked, or not.

作者: Leanne Seawright 的来源 发布者: 2017 年 9 月 15 日

回应 4


3

4702 作者的声誉

决定

.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 selector is used to select elements that is placed immediately after (not inside) the first specified element.

reference : https://www.w3schools.com/cssref/sel_element_pluss.asp

作者: zynkn 发布者: 2017 年 9 月 15 日

3

5183 作者的声誉

If you add + selector than you need to add label immediately follows after radio button. If you want some structure code than add span after radio button and + css for that.

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

作者: Mukesh Ram 发布者: 2017 年 9 月 15 日

2

5104 作者的声誉

Remove the input[type=radio] + part from the selectors, something like this:

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

作者: Usagi Miyamoto 发布者: 2017 年 9 月 15 日

0

1 作者的声誉

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

作者: Saroz P. 发布者: 2017 年 9 月 15 日
32x32