已禁用的单选按钮显示为已选中

Question

我正在努力在一个表单中的单选按钮上应用一些样式，在正常情况下它们工作正在应用很好的自定义样式但是如果我禁用单选按钮它们都显示为选中。

这是我的代码：

    input ::-ms-clear {
        display: none;
    }
    
    .radio {
      margin: 0.5rem;
    }
    .radio input[type="radio"] {
      position: absolute;
      opacity: 0;
    }
    .radio input[type="radio"] ~ .radio-label:before {
      content: '';
      background: white;
      border-radius: 100%;
      border: 1px solid #1c2e4f;
      display: inline-block;
      width: 1.4em;
      height: 1.4em;
      position: relative;
      top: -0.2em;
      margin-right: 1em;
      vertical-align: top;
      cursor: pointer;
      text-align: center;
      -webkit-transition: all 250ms ease;
      transition: all 250ms ease;
    }
    .radio input[type="radio"]:checked ~ .radio-label:before {
      background-color: #3E64AD;
      -webkit-box-shadow: inset 0 0 0 4px white;
              box-shadow: inset 0 0 0 4px white;
    }
    .radio input[type="radio"]:focus ~ .radio-label:before {
      outline: none;
      border-color: #3E64AD;
    }
    .radio input[type="radio"]:disabled ~ .radio-label:before {
      -webkit-box-shadow: inset 0 0 0 4px white;
              box-shadow: inset 0 0 0 4px white;
      border-color: #bfbfbf;
      background: #bfbfbf;
    }
    .radio input[type="radio"] ~ .radio-label:empty:before {
      margin-right: 5em;
    }
    
    .radio-label {
        line-height: 1rem;
    }

     <div>
        <label> Radio buttons </label>
        <div class="col-md-3 radio">
          <label class="radio-inline">
            <input type="radio" value="'NONE'" name="feature1" checked="checked" disabled="disabled"/>
            <span class="radio-label"> OPT I </span>
          </label>
        </div>
         <div class="col-md-3 radio">
          <label class="radio-inline">
            <input type="radio" value="'NONE'" name="feature1" disabled="disabled"/>
            <span class="radio-label"> OPT II </span>
          </label>
        </div>
         <div class="col-md-3 radio">
          <label class="radio-inline">
            <input type="radio" value="'NONE'" name="feature1" disabled="disabled"/>
            <span class="radio-label"> OPT III </span>
          </label>
        </div>
        
      </div>
    
    </body>
    </html>

没有应用样式它的工作正常，任何人都可以指出我在哪里错了吗？

Answer 1

删除此样式：

.radio input[type="radio"]:disabled ~ .radio-label:before {
  background: #bfbfbf;
}

<强>段：

＆＃13;

＆＃13;

    input ::-ms-clear {
        display: none;
    }
    
    .radio {
      margin: 0.5rem;
    }
    .radio input[type="radio"] {
      position: absolute;
      opacity: 0;
    }
    .radio input[type="radio"] ~ .radio-label:before {
      content: '';
      background: white;
      border-radius: 100%;
      border: 1px solid #1c2e4f;
      display: inline-block;
      width: 1.4em;
      height: 1.4em;
      position: relative;
      top: -0.2em;
      margin-right: 1em;
      vertical-align: top;
      cursor: pointer;
      text-align: center;
      -webkit-transition: all 250ms ease;
      transition: all 250ms ease;
    }
    .radio input[type="radio"]:checked ~ .radio-label:before {
      background-color: #3E64AD;
      -webkit-box-shadow: inset 0 0 0 4px white;
              box-shadow: inset 0 0 0 4px white;
    }
    .radio input[type="radio"]:focus ~ .radio-label:before {
      outline: none;
      border-color: #3E64AD;
    }
    .radio input[type="radio"]:disabled ~ .radio-label:before {
      -webkit-box-shadow: inset 0 0 0 4px white;
              box-shadow: inset 0 0 0 4px white;
      border-color: #bfbfbf;
    }
    .radio input[type="radio"] ~ .radio-label:empty:before {
      margin-right: 5em;
    }
    
    .radio-label {
        line-height: 1rem;
    }

＆＃13;

     <div>
        <label> Radio buttons </label>
        <div class="col-md-3 radio">
          <label class="radio-inline">
            <input type="radio" value="'NONE'" name="feature1" checked="checked" disabled="disabled"/>
            <span class="radio-label"> OPT I </span>
          </label>
        </div>
         <div class="col-md-3 radio">
          <label class="radio-inline">
            <input type="radio" value="'NONE'" name="feature1" disabled="disabled"/>
            <span class="radio-label"> OPT II </span>
          </label>
        </div>
         <div class="col-md-3 radio">
          <label class="radio-inline">
            <input type="radio" value="'NONE'" name="feature1" disabled="disabled"/>
            <span class="radio-label"> OPT III </span>
          </label>
        </div>
        
      </div>
    
    </body>
    </html>

＆＃13;

＆＃13;

＆＃13;