Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Christine Bergeron
Christine Bergeron
2,533 Points

Why isn't the :disabled selector changing the background color of the email input?

Hello, everyone! I've followed Guil's code exactly as he types it in the video, however, I am not getting the same results. When I put the :disabled selector in my css, it does seem to disable the email input because the background is no longer the light yellow color and I can no longer click on the email input, but it doesn't change the background color to #ddd. Not sure if I'm missing something or if Chrome is being difficult.

alt text

Here's my html:

<!DOCTYPE html>
<html>
<head>
    <title>UI Element States Pseudo-Classes</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form>
        <input type="text" name="name" placeholder="name">
        <input type="text" name="email" placeholder="email" disabled>
        <div>
            <input name="radio" id="radio1" type="radio"><label for="radio1">Option 1</label>
            <input name="radio" id="radio2" type="radio"><label for="radio2">Option 2</label>
            <input name="radio" id="radio3" type="radio"><label for="radio3">Option 3</label>
        </div>
        <input type="submit" name="submit">
    </form>
</body>
</html>

and here's my css:

body {
    background-color: #e8f3f8;
    font: 1em/1.5 sans-serif;
}
form {
    margin: 50px auto;
    width: 320px;
    color: steelblue;
}
input {
    padding: 10px;
    border-radius: 5px;
    font-size: inherit;
}
input[type="text"] {
    display: block;
    margin-bottom: 25px;
    width: 100%;
    border: 2px solid steelblue;
}
input[type="radio"] {
    margin: 0 8px 25px 18px;
}
input[type="radio"]:first-child {
    margin-left: 0;
}
input[type="submit"] {
    width: 344px;
    height: 45px;
    border: none;
    background: steelblue;
    color: white;
    cursor: pointer;
}

/* UI Element States Pseudo-Classes */

input[type="text"]:enabled {
    background: #fcfbcc;
};

:disabled {
    background: #ddd;
}

Thanks!

2 Answers

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Hi Christine. instead of :disabled as a selector, try [disabled] and remove the semi colon from the end of the rule for your enabled input tag. You could probably just have [enabled] as a selector for that rule as well, instead of input[type="text"]:enabled

Christine Bergeron
Christine Bergeron
2,533 Points

Thanks for your answer! Switching from :disabled to [disabled] works for me, but for some reason it doesn't work as [enabled]. By the way, the real reason my code wasn't working properly was due to a rogue semicolon! Doh!

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Yeah I mentioned removing the semi colon in my answer but I probably could have been more specific about where it was located.

Ben Griffith
Ben Griffith
5,808 Points
Ben Griffith
Ben Griffith
5,808 Points

As far as I can tell, :disabled won't work on your css because you are setting the default state with a selector that has more weighting.

You should get your desired result if you do the following;

input[type="text"]:disabled {
    background: #ddd;
}

This is because it has the same weighting as your normal state (input[type="text"]).

Christine Bergeron
Christine Bergeron
2,533 Points

Thanks for your help. I discovered a pesky semicolon before my :disabled line that was messing with my code. It's nice to know that there are many variations/solutions though!

Ben Griffith
Ben Griffith
5,808 Points
Ben Griffith
Ben Griffith
5,808 Points

Haha yeah! I did a quick test with your code and found it too! Glad you got it sorted.

Christine Bergeron
Christine Bergeron
2,533 Points

I've noticed that with certain selectors from previous lessons, Sublime Text will automatically put a semicolon as I'm typing before I even put curly braces. Guess I'll have to keep an extra close eye on that!