Question

Views

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>

about 4 years ago · Juan Pablo Isaza

Answer question

Answer 1 · 2022-07-08T03:03:49.391Z

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>

Answer 2 · 2022-07-08T03:03:49.399Z

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

Answer 3 · 2022-07-08T03:03:49.409Z

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>