如何在引导程序中更改单选按钮的颜色和大小？答案

【问题标题】：How to change radio button color and size in bootstrap?如何在引导程序中更改单选按钮的颜色和大小？
【发布时间】：2016-02-10 12:09:49
【问题描述】：

我正在使用引导程序，但我可以更改单选按钮的大小并在他的颜色

这是机器学习的例子

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

【问题讨论】：

你能举一个例子来说明你已经拥有什么以及到目前为止你已经尝试过什么吗？我建议jsfiddle.com
How to style radio button or checkbox inside a bootstrap table?的可能重复

标签： html css

【解决方案1】：

单选按钮由浏览器处理，没有真正的 CSS 来实现。

有两个选项可以设置圆形单选按钮的样式：

纯 CSS
图片

这个网站很好地解释了这两种技术：stephenmorley.org

说实话，如果你的目标是很多不同的浏览器，通过 CSS 进行正确的设计是相当困难的，这就是为什么如果你有大量的观众，我建议你使用图片的原因。

您可以查看我为您制作的这个 JSFiddle 用于测试目的https://jsfiddle.net/DTcHh/16879/

<div class="container">
    <label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

</div>

【讨论】：

但我可以更改单选按钮的圆形边框颜色
您无法对原生元素的所有属性（选择、输入、文本区域等）进行样式化，因此您需要使用 CSS 或任何 javascript 插件来解决。
但是我不能使用java脚本插件只使用css
你不能只改变按钮的颜色，按钮的样式是由浏览器决定的。如果你想处理这个，它会更复杂，但它是可能的。看看这两种方法code.stephenmorley.org/html-and-css/…
检查它的材料设计单选按钮，他是在没有 javascript 的情况下更改所有样式

【解决方案2】：

通过将引导按钮类定义添加到封装单选输入元素的标签来更改颜色。

<div class="container">
    <label class="radio-inline btn btn-danger">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline btn btn-success">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

</div>

【讨论】：