css change checkbox и переключатели не отображают ничего

Question

Итак, у меня есть несколько CSS, которые меняют флажки / переключатели на иконки со шрифтами. Я использовал его в разных проектах раньше, и все работало нормально. Тем не менее, проект, над которым я сейчас работаю, не позволяет (это сайт opencart, с начальной загрузкой).

Вот мой код (по сути это то же самое для флажка, но вместо радио он говорит флажок лол):

.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 не работает? Мне нужно, чтобы он мог видеть, проверено это или нет.

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

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