單選按鈕CSS3-自定義

Question

我正在嘗試在引導程序上自定義單選按鈕，但是它不起作用，當我在純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的父類，我正在正確顯示我的Radios，但是未顯示Checked狀態（圖像Radio-check），我嘗試使用顏色更改而不是背景圖像但這也不起作用。

有沒有人有在引導程序中自定義單選按鈕的經驗？ 請指導

瑪諾·索尼（Manoj Soni）

Answer 1

您需要找到bootstrap css類並將其覆蓋。 或者使用ID代替CSS中的類。 如果那也不起作用，請嘗試！important。