禁用的单选按钮显示为选中状态

debugcn 发表于 Dev

吉姆克

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

这是我的代码：

    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>

没有应用样式它的工作正常，有人能指出我在这里错在哪里吗？

里克·希区柯克

删除此样式：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。