Html 单选按钮CSS3-自定义

我试图自定义引导上的单选按钮，但它不起作用，当我尝试在引导环境外使用纯HTML时，它起作用了，下面是HTML代码，后面是我正在使用的CSS

<div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          My Current AMP Policies
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Financial Planning and Retirement Advice
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
           LifeCover
        </label>
      </div>

使用.newradio的原因是我使用该div作为上述给定HTML的父类，我得到了我的收音机的正确显示，但检查状态（图像收音机检查）未显示，我尝试使用颜色更改而不是背景图像，但这也不起作用

有没有人有在bootstrap中定制单选按钮的经验？请引导

---

Manoj Soni

您需要找到引导css类并覆盖它。或者在css中使用ID而不是类。当那也没用的时候试试！重要信息。

当遇到困难时，自定义带或不带引导的单选按钮应该没有区别。看看这篇文章是否有帮助：您是否确保您的样式特异性高于bootstrap设置的样式特异性？这是一篇关于它的好文章：谢谢卢卡斯纳达卢蒂，你的链接真的很有帮助

.newradio input[type=radio] {display: none;}
.newradio label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
.newradio label:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 7px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 3px;
background-color: #fff;
border:solid 1px #bcb882;
}
.newradio input[type=radio]:checked + .newradio label:before {
content: "";
background: url(../../Content/images/radio-check.png);
display: inline-block;
}