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

问题描述

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

这里是毫升示例

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

解决方案

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

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

• 纯 CSS
• 图片

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

老实说，如果您针对许多不同的浏览器，那么通过 CSS 进行正确的设计是相当困难的，这也是为什么我建议您在拥有大量观众的情况下使用图片的原因.

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

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

Here is ml example

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

解决方案

Radiobuttons are handled by the browser, there is not really CSS that make this.

Byt there are two options to style the round circle of radiobuttons:

• Pure CSS
• Pictures

This website explain those two techniques quite well: stephenmorley.org

To be honest, it's quite difficult to have right design by CSS if you are targetting lots of different browsers, and it is the reason why I recommand you to use picture if you have large audience.

You can check this JSFiddle I've made for you for testing purposes 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>

这篇关于如何在引导程序中更改单选按钮的颜色和大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！