Hide div when input on focus, css

Question

Navigation

#1 by (2 votes)

3

How can I hide my div when input is in focus? I used this cod and it did not work for me.

.A:focus  .B {
    display: inline-block !important;
}

css

asked by anonymous 04.02.2015 / 23:45

1 answer

score 2 · Accepted Answer

You can do something like this:

div {
     background: #f0a;
     display: true;
     height: 200px;
     width: 200px; }

input:focus + div { display: none }

You can use classes or identifiers like this:

div.hidden {
background: #f0a;
display: true;
height: 200px;
width: 200px; }
input.focus:focus + div.hidden { display: none }

And then add the HTML like this:

<input class="focus" type="text" value="">
<div class="hidden"></div>