css changing checkbox and radio buttons displaying nothing

Issue

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.

Solution

.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

Answered By - kyun