no style change when disabling fieldset-CodePudding

how do I make my disabled and enabled <fieldset> look the same?

i.e. when toggling disabled no difference should be visible

I tried this but it doesn't work:

fieldset{
  opacity:1 !important;
  border:0;
}

fieldset:disabled{
 opacity:1 !important;
}

fieldset:disabled *{
 opacity:1 !important;
}

<fieldset disabled>
  <select>
   <option>testing</option>
  </select>
</fieldset>

CodePudding user response：

You could use initial, note that it is not supported on internet explorer.

fieldset {
  border: 0;
}

fieldset:disabled * {
  opacity: initial;
  color: initial;
}

<fieldset disabled>
  <select>
   <option>testing</option>
  </select>
</fieldset>

CodePudding user response：

Try using pointer-events:none; this disables the form while still keeping the background same

fieldset {
  border: 0;
}

.disabled *{
 pointer-events:none;
}

<fieldset class='disabled'>
  <select>
   <option>testing</option>
  </select>
</fieldset>

I've used .disabled * so that the click events on the fieldset itself can still be detected

CodePudding user response：

One way, making sure it looks the same when disabled, is to explicitly set the various colors as well as the opacity.

fieldset,
fieldset>* {
  background-color: white;
  border-color: black;
  color: black;
  opacity: 1;
}

<fieldset disabled>
  <select>
    <option>testing</option>
  </select>
</fieldset>

CodePudding user response：

add pointer-events:none; to the div.