CODEWITHSUNDEEP
javascripthtmlcss
user4082764
user4082764

Reputation:

Focus input then change outside div color

DEMO

You can see there is a little red color area. This red color is main div background color. And this div has input inside.

So if you click the red area then you can see the search icon changing background color. But when you click the input area then the color will not changing. What can I do here?

HTML:

<div class="tt" tabindex="2">
  <div class="test"></div>
  <input type="text" class="input" placeholder="Some text..."/>
</div>

CSS:

.tt {
  width:500px;
  height:50px;
  margin:0px auto;
  margin-top:100px;
  background-color:red;
}
.test {
  float:left;
  position:absolute;
  z-index:1;
  width:50px;
  height:50px;
  background-color:blue;
  border-radius:50%;
  background-image:url(http://www.androidpolice.com/wp-content/uploads/2014/06/nexusae0_search.png);
  background-size:50px;
   transition: transform(rotate);
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.770, 0, 0.150, 1);
}
.tt:focus .test{
   -webkit-transform: rotate(360deg);
  border-radius:50%;
  background-image:url(http://ajkdjournal.org/wp-content/uploads/2014/05/e62f58b03dbcfda4a54f6bac1057305e.png);
}
.input{
  border:none;
  outline:none;
  padding:18px;
  width:400px;
  text-indent:40px;
}

Upvotes: 0

Views: 1738

Answers (2)

lmgonzalves
lmgonzalves

Reputation: 6588

You need to put your input before the .test div, and then use the sibling selector (+). The code should be:

HTML:

<div class="tt" tabindex="2">
  <input type="text" class="input" placeholder="Some text..."/>
  <div class="test"></div>
</div>

CSS:

.input:focus + .test{
   -webkit-transform: rotate(360deg);
  border-radius:50%;
  background-image:url(http://ajkdjournal.org/wp-content/uploads/2014/05/e62f58b03dbcfda4a54f6bac1057305e.png);
}

Hope this help !

Upvotes: 0

Alon Eitan
Alon Eitan

Reputation: 12025

I've added some changes in the HTML and the CSS. I hope it helps demo

<div class="tt" tabindex="2">
    <!-- note I changed the HTML structure + added changes in the CSS -->
    <input type="text" class="input" placeholder="Some text..."/>
    <div class="test"></div>
</div>

Upvotes: 1

Related Questions