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

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

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

這是我的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; 
}

來源

2016-03-20 BarneyL. BarStin

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

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

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

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

來源

2016-03-20 21:42:09 maraca

而不是使用圖像，你也可以使用fontawesome，只是改變字體顏色這裏是如何定製複選框 http://codepen.io/jamesbarnett/pen/yILjk/ – Bart

@BartKooi是fontawesome一個很好的例子真正值得它的名字。 – maraca

@maraca所以，你知道有關如何創建它的任何教程？ –

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

回答

相關問題