CSS改變複選框，並顯示沒有

Question

單選按鈕，所以我有一些CSS這改變複選框/單選按鈕是字體真棒圖標。我之前在不同的項目中使用過，而且一切正常。但是，我目前正在研究的這個項目不允許它（這是一個opencart站點，帶有bootstrap）。

這裏是我的代碼（這是本質上的複選框是相同的，但不是無線，它說複選框笑）：

.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

如果你比你需要添加標籤添加+選擇立即單選按鈕，如下。如果你想比單選按鈕，+的CSS，經過加span一些結構代碼。

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