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 Shira Lotan
Shira Lotan
3,040 Points

Make background darker when focusing an input

I have a single input on a page and once the user is standing inside it I want the total body background to be darker as if I'm focusing only the input. How can I create this effect using CSS? (No Jquery)

kevin curtis
kevin curtis
15,287 Points
kevin curtis
kevin curtis
15,287 Points

Try this:

input[type="text"]:focus {
  background-color: gray;
}
Marc Sanchez
Marc Sanchez
20,039 Points

You want the body BG to change color when a user focuses on an input field? Or, are you looking to change the BG color of the input field itself when a user is focused on it, ie: clicks the input field?

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

It would be a bit easier to answer this question with some sample code, but I'll throw in my 2¢ as it is.

If I understand you correctly, when the user focuses on the <input> element, you want to change the color of the entire webpage in order to shine a spotlight on the <input>. 

<body> <!-- The element you want to use CSS on. -->
    <input></input> <!-- The element being focused, to initiate the CSS change. -->
</body>

If this is what you are hoping to do, I do not believe this is possible with only CSS. CSS stands for Cascading Style Sheets, meaning your styles cascade down the tree. Think of it like a river with waterfalls; you can't go back up again. If you want to change the styles of parent or ancestor elements, I don't see a way around using JavaScript.