Applying CSS to input container on focus

Question

I have a div with a input field and a button inside. I would like the button to be hidden until the user focuses on the input.

I have tried to use the :focus pseudo-class on the containing div as I thought it would be inherited upon focusing on the input however it did not work.

Here is my html

<div class="search">
    <input type="text" placeholder="Search..." />
    <button type="submit">Search</button>
</div>

And here is the css I have already tried

.search button {
    display: none;
}

.search:focus button {
    display: block;
}

Is it possible to do this without JavaScript?

Community · Accepted Answer · 2017-05-23 10:33:48Z

7

In this case, you can use the adjacent sibling combinator, +.

Example Here

.search input:focus + button {
    display: block;
}

As FelipeAls points out, though, you can't click on the button if the focus is removed. You could therefore do something like this in addition:

Example Here

.search button:hover,
.search button:focus {
    display:block;
}

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered May 9, 2014 at 18:48

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JazzyP Over a year ago

Perfect - thanks a lot. I will mark as answer in 13 minutes :)

FelipeAls Over a year ago

Fine until you try to reach this button (edit: by tabbing)... then input hasn't focus anymore and the button gets back to its hidden state :(

JazzyP Over a year ago

@FelipeAls You are correct however this button will act as a fall-back for users with JavaScript disabled in this case, there will be another button which will override this when JavaScript is enabled so I am not too worried about it not being perfectly practical

Soundar Over a year ago

The above works while click the button using mouse click.. but when i press the tab key the button disappears.. for that we can use the additional style.. .search button:focus { display:block; } ... so that while tabbing also the button becomes there..

Josh Crozier Over a year ago

@SoundarR Good point, I forgot about that :) Thanks for mentioning that.

Collectives™ on Stack Overflow

Applying CSS to input container on focus

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related