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 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
>Solution :
No. Anything you do to disable user-agent styles amounts to an override anyway, so just do an override with your custom styles.