html - 禁用的单选按钮显示为选中

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

片段:

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

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