我如何用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自定义我的复选框？

回答

相关问题