Question

我正在使用bootstrap，但我可以更改单选按钮大小和他的颜色

这是ml示例

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

Answer 1

Radiobuttons由浏览器处理，实际上没有CSS可以做到这一点。

Byt有两种选择来设置无线电按钮的圆形样式：

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

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

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

2 个答案: