CODEWITHSUNDEEP
htmlcsscheckboxradio-button
SoulieBaby
SoulieBaby

Reputation: 5471

css changing checkbox and radio buttons displaying nothing

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.

Upvotes: 1

Views: 1414

Answers (4)

Saroj Kumar Poddar
Saroj Kumar Poddar

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

Upvotes: 0

kyun
kyun

Reputation: 10264

.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

Upvotes: 3

Usagi Miyamoto
Usagi Miyamoto

Reputation: 6299

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>

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

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>

Upvotes: 3

Related Questions