CODEWITHSUNDEEP
htmlcsscss-selectorsfocus
user1117313
user1117313

Reputation: 1985

Display a div when an input div is focused

I want to display a div when an input field is focused(active?) In the following code, I want to display .text when .input is focused. I'm trying this:

HTML :

<div class="box">
    <input class="input" type="text" value="" />
    <div class="text">text</div>
</div>

CSS :

.text { display: none; }   
.input:focus .text { display: block; }

Example :

JSFiddle

Upvotes: 0

Views: 154

Answers (2)

potashin
potashin

Reputation: 44581

You can also use general sibling selector ~ :

.input:focus ~ .text { display: block; }

JSFiddle

Upvotes: 1

Andy
Andy

Reputation: 4778

You need to use the sibling CSS selector:

.input:focus + .text{
    display: block;
}

Updated Fiddle

Upvotes: 5

Related Questions