我如何用css和Bootstrap自定義我的複選框？

Question

我正在創建一個包含許多字段和複選框的表單，問題是我試圖根據表單樣式自定義複選框（失敗）。

正如你可以在圖片中看到，複選框的滴答聲是黑色的，我需要它的綠色。我怎樣才能改變顏色？我怎樣才能改變複選框的大小？

這是我的HTML：

 <div id="Cajamitad1"> 
      <form role="form"> 
       <div class="checkbox"> 
        <label><input type="checkbox" value="" > 
        <a class="FontStyle">Vegano</a> 
        </label> 
       </div> 
     <  div class="checkbox"> 
        <label><input type="checkbox" value=""> 
        <a class="FontStyle">Diabetico</a> 
        </label> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox" value=""> 
        <a class="FontStyle">Celiaco</a> 
        </label> 
       </div> 
      </form> 
     </div> 

，這我的CSS：

#ContForm{ 
    display: inline; 
    box-sizing: border-box; 
} 
.checkbox{ 
    margin: 10px; 
    padding: 10px; 
} 

.checkbox input[type="checkbox"]{ 
    margin-left: 5px; 
} 
#Cajamitad1{ 

    margin-top: 10px; 
    width: 40%; 
    float: left; 
    padding-left: 200px; 
} 

Answer 1

糾正我，如果我錯了，但據我所知，這是不可能的。

這是我的推理：如果你檢查引導複選框，那麼你會發現複選框本身是由<input type="checkbox">繪製的，你對這個控件的控制非常有限。有些瀏覽器可讓您更改複選框的大小，但不是全部。

所以你唯一能做的就是製作你自己的複選框，例如通過使用兩個圖像和一些CSS。

或者通常更多的移動友好只是兩個按鈕並排「是」和「否」。然後，如果你點擊一個，它就會變成活動的，就像某種切換按鈕一樣。