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

Question

I was working on applying some styles on radio buttons in a form, under the normal scenario they work just fine custom styles are being applied but if I disable the radio buttons they all are being displayed as selected.

Here is my code:

  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> 

without applying styles its working fine, can anyone point me where am I wrong here?

Answer 1

Remove this style:

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

Snippet:

  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>