我正在尝试自定义引导程序上的单选按钮,但它无法正常工作,当我在纯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>
CSS
.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;
}
.newradio的原因是我使用该div作为上面给定HTML的父类,我正在正确显示我的无线电但是检查状态(图像无线电检查)没有显示,我尝试使用颜色更改背景图片,但也不起作用。
有没有人有自定义引导程序单选按钮的经验?请指导
Manoj Soni
答案 0 :(得分:0)
您需要找到bootstrap css类并覆盖它。或者在CSS中使用ID而不是class。如果这也不起作用,请尝试!重要。