Choose the descendant element of the element that has a specific attribute

Question

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work properly. Below is the HTML code followed by the CSS:

<button disabled>
    <span class="dark-disabled">Start New Game</span>
</button>

button:disabled span{
    background: #ccc;
}

Interestingly, it seems to work when using a class selector instead:

button:disabled .dark-disabled{
    background: #ccc;
}

css html attributes css-selectors

Answer 1

Answer №1

If you're seeking information on the CSS attribute selector, you can find it here

button[disabled] span{
  background: #ccc;
}

Edit:

I misunderstood your question initially. Both :disabled and [disabled] will work for a button. The code snippet you provided functions correctly in Firefox: JSFiddle

May I ask which browser you are utilizing?

Answer 2

If you're seeking information on the CSS attribute selector, you can find it here

button[disabled] span{
  background: #ccc;
}

Edit:

I misunderstood your question initially. Both :disabled and [disabled] will work for a button. The code snippet you provided functions correctly in Firefox: JSFiddle

May I ask which browser you are utilizing?

Answer 3

Answer №2

It is common for all web browsers, including IE8 and newer versions, to automatically apply a gray background to disabled buttons. You can achieve this effect by simply adding the "disabled" attribute to the button element. Take a look at this example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>
<body>
    <button>Click me</button>
    <button disabled="disabled">Click me too</button>
</body>
</html>

This approach ensures a consistent visual appearance for disabled buttons across different browsers.

Answer 4

It is common for all web browsers, including IE8 and newer versions, to automatically apply a gray background to disabled buttons. You can achieve this effect by simply adding the "disabled" attribute to the button element. Take a look at this example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>
<body>
    <button>Click me</button>
    <button disabled="disabled">Click me too</button>
</body>
</html>

This approach ensures a consistent visual appearance for disabled buttons across different browsers.

Choose the descendant element of the element that has a specific attribute

Answer №1

Edit:

Answer №2

Similar questions

Guide to launching a web browser within a Phonegap app with a button click event

Looking to switch up the thumbs-up button design?

Employing CSS animations to elevate div elements

Tips for avoiding the security risk of "A potentially hazardous Request.Form" in requests

Having trouble making the JavaScript mouseenter function work properly?

store JSON data within an HTML list element

The magic of CSS's 3D Transformation feature

The content within a container that has flex-grow: 1 is exceeding its bounds instead of being able to scroll

Javascript function fails to trigger when clicked

Obtain the form value upon submission without the need to reload the page

Erase every picture contained within the element

Changing CSS image properties: A step-by-step guide

Creating a popup window using HTML

Container contents are spilling out of control after adjusting container height to auto

How can the background of a div be altered when text is typed into an input field?

Prevent users from including spaces in their usernames during registration

Is PHP the best choice for creating simple websites?

Can I set a nested DIV to a higher z-index than a parent DIV in IE7, so that it appears above it?

Guide to altering the red color of required fields in Joomla

How to determine if an Angular list has finished rendering