Why don't disabled buttons styled with color:inherit adhere to disabled button aesthetics?

In the example provided, setting the property color: inherit on a button element prevents a disabled button from appearing in a disabled state.

I initially expected that due to specificity rules, disabled buttons would still display as disabled. I am curious about how this particular styling overrides the default user-agent behavior and if there is a way to revert back to showing them as disabled. Simply manually assigning a color using button:disabled {color:GreyText} did not yield the desired result.

You can view the demonstration here: https://jsfiddle.net/zzhLhkjx/

For comparison, take a look at this alternative example: https://jsfiddle.net/g46kg6ev/. Here, a disabled button with greyed out text is shown. The difference lies in simply specifying the color to be inherited, which changes the behavior.

Answer №1

From my understanding, custom author styles will always take precedence over user-agent styles, regardless of their specificity. This is because author styles have more influence than user-agent styles.

Check out this JSFiddle demo to clear any doubts about specificity


For more information on the weight of user-agent stylesheets, refer to an answer (What is user agent stylesheet) by @JukkaK.Korpela

"User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this."

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch? Note: I would like to add hover animation to the borders if possible. I attempted to do it using the following code: clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%); However, the shapes created by ...

Issues arising when checking the responsiveness of the navigation bar on display

Recently, I encountered an issue with the navigation bar on my webpage. It contains an image logo on the left and three links on the right. The problem arises when I test the responsiveness using different devices on Chrome; the navigation bar resizes and ...

Can you tell me the standard CSS easing curves?

When working with css, we have the option to incorporate easing for transitions, like this: transition: all .5s ease-in-out CSS provides predefined easings such as ease, ease-in, ease-out, and ease-in-out. We can also create a customized easing using a ...

The button contains a clickable link inside it, however the button itself is not clickable

I am encountering an issue with a button that contains a link. Whenever I hover over the button, the cursor changes as expected, but clicking on the button itself does not trigger any action. Instead, I have to click on the link inside the button to redi ...

Learning how to nest <div> elements within another <div> and then utilize positioning in HTML/CSS for beginners

Struggling to create a simple 4 block layout in the center of the page. Currently, I am using the following CSS on the parent div (class=wrapper) .wrapper { margin:0 auto; width:960px; } However, this centers all child divs but I am unable to position th ...

Align two spans vertically in a div using Bootstrap

Struggling to create a left-hand side navigation card with Bootstrap and Bootstrap icons. The goal is to have the page name on the left and an icon on the right, but vertical alignment is posing a challenge. Take a look at the code snippet below: <b-li ...

Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...

Is there a way to use flexbox in a grid to center only a specific tab from MUI?

I am working with an array of tabs and encountering a layout issue. The tabs need to share the available space when there's more than one tab, but when there's only one tab, it should be positioned in the middle of the column. How can I address t ...

Guide to utilizing Bootstrap v4 SCSS edition in a Bower project

Recently, I have been using the SASS/SCSS version of Bootstrap #3.3.6 but I just found out that they released version 4. While there is a lot of information on how to use Bootstrap v4 (non SCSS) in projects, I'm having trouble finding resources on ho ...

Tips for aligning a div containing an image in the center of another div

Trying to perfectly center an image inside a div both vertically and horizontally using the display inline-block property. HTML <div class="center-wrapper"> <div class="image-holder"> <img src="picture.jpeg" alt="Centered Image"> ...

Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...

What is the best way to ensure an image fills the entire width on smaller screens?

I am in the process of creating a news blog. I have successfully designed my main article cards, each featuring an image to the left and essential content such as title, brief description, author, and date on the right side. While everything appears flawl ...

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

Issues with the Navbar collapsing are causing the right-most item to be cut off too soon

I am facing an issue with my Bootstrap 4 navbar menu. When I resize the page, it reaches a certain size threshold where the far-right item "Opportunities" in the navbar gets cutoff before collapsing. In simple terms, the items are getting cut off before t ...

Tips for preventing redundancy in html theme construction by using bootstrap classes only once

As I embark on creating an HTML theme, I have decided to incorporate Bootstrap 4. One challenge I encountered was the need to repeat Bootstrap classes in various places, such as: <div class="row border border-top-0 mt-2 p-2 bg-info">One</div> ...

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

What is the best way to define line length in Bootstrap?

I have the following HTML: .line { width: 100%; height: 14px; border-bottom: 1px solid lightgrey; position: absolute; } .circle { height: 24px; width: 24px; background-color: lightgrey; border-radius: 50%; display: inline-block; } < ...

Tips for changing the background color depending on the value

I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To v ...

Increase the height of the div to align with the height of the other div

Is there a way to use CSS to automatically adjust the height of both the right and left <div> elements so they fill the background-color based on the greater height, without setting a specific height for either? The left <div> can vary in heig ...