0

When setting a Checkbox to disabled the browser updates the look of the element by greying it out. When viewing the Styles in Dev Tools I can see new default styles are being applied to my disabled element. Is there a way to tell the page to NOT apply the default disabled style and to just leave the element as is?

I have discovered that I can apply my own styles using the :disabled CSS pseudo-class (I found this NOT to be true) to these disabled checkboxes however I just don't want the default disabled style to apply in the first place and so I am curious if I can avoid adding styles to reverse the disabled styles.

Simple HTML

<html lang='en'>
<head>
</head>
<body>
    <input type="checkbox" checked onclick="showOccur(event)";/>
    <input type="checkbox" checked onclick="showOccur(event)"; disabled/>
</body>
</html>

Screenshot of Checkboxes using default Chrome browser styles

CheckboxesImage

The chosen answer for this question is still correct. The answer is No. To follow up on that answer I still did not know how to alter the style for my checkbox. I found answers in the below SO Posts. The main takeaway is that you cannot adjust the styles of disabled elements and yet we have the :disabled CSS pseudo-class :

How to style a disabled checkbox?

How to style a checkbox using CSS

Code Novice
  • 2,043
  • 1
  • 20
  • 44

1 Answers1

2

No. Anything you do to disable user-agent styles amounts to an override anyway, so just do an override with your custom styles.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Is there an easy way to detect which styles from the original were changed? In my actual production site when viewing the styles that are applied to my checkboxes they are either applied directly or inherited and the list is cumbersome. Perhaps I'm too new to this. Regardless, Is there a document or an easy way to find out which styles per my element type are being altered when it is set to disabled? – Code Novice Mar 15 '23 at 20:34
  • 1
    I'm not sure what you mean. It's just a few things, and you _know_ what you want to change because you can see it. – isherwood Mar 15 '23 at 20:36
  • Hmmm... during my attempt to get this to work I discovered that actually updating the style for a Checkbox to be difficult None of the styles I tried using were being applied. Via google and other SO Posts I discovered that there is a special css attribute I need to use in order to be able to actually apply style changes to the default checkbox. I needed to use the accent-color Property which when viewing the dev tools styles is nowhere to be seen. I refer to this SO Post: https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css/69164710#69164710 – Code Novice Mar 15 '23 at 21:27
  • Yes I already posted a question on that thank you sir. I discovered that applying css to disabled elements is basically not possible without getting all hacky. – Code Novice Mar 16 '23 at 18:21