cssチェックボックスとラジオボタンが表示されずに変化する

Question

チェックボックスとラジオボタンをフォントの素晴らしいアイコンに変更するCSSがあります。これまでにさまざまなプロジェクトで使ってきましたが、すべてうまくいきました。しかし、私が現在取り組んでいるプロジェクトは、それを許可していません（ブートストラップを持つオープンカートのサイトです）。

ここに私のコードは、（それが基本的にあるチェックボックスに同じだが、代わりにラジオのそれは笑チェックボックスを言う）です：

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

任意のアイデア+ラベルが機能しない理由には？それがチェックされているかどうかを確認できるようにする必要があります。

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{ 
 
\t position: relative; 
 
\t 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; 
 
\t 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{ 
 
\t content: ''; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t height: 0; 
 
\t width: 0; 
 
\t border: 3px solid red; 
 
\t margin: -3px 0 0 -3px; 
 
    display:none; 
 
} 
 

 
.radio input[type=radio]+i, 
 
.radio input[type=radio]+i::before{ 
 
\t 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>