单选按钮CSS3-自定义

Question

I am trying to customize Radio buttons on bootstrap but it is not working, When i try outside bootstrap environment in plain HTML it works, Below is code for HTML followed by CSS I am using

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

THE 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;
}

The reason for .newradio is I am using that div as parent class of above given HTML, I am getting proper display of my Radios but Checked status (the image radio-check) is not showing, I tried using color change instead of background image but that doesn't work either.

Does anyone has experience in customizing radio button in bootstrap? please guide

Manoj Soni

Answer 1

You need to find the bootstrap css class and overwrite it. Or use ID instead of class in the css. When that also don't work try !important.