CODEWITHSUNDEEP
htmlcss
Raj
Raj

Reputation: 1437

Change search button on input focus

I want to change the search button when a user starts typing something in the input box.

My html code is 

 <div class="newsletter">
    <input type="text" name="email" placeholder="Your Email Here" value="">
    <input class="newsletter-submit" type="submit" value="">
 </div>

CSS

.newsletter input[type="text"]{
  background:transparent;
  color: $white;
  border: 1px solid $white;
  font-family: 'sorts-mill-goudy'; font-style: italic;
}
input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil.png") no-repeat;
  width:21px;
  height: 21px;
  position: absolute;
  border: none;
  right:50px;
  top:25px;
}

.newsletter input:focus input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil-hover.png") no-repeat !important;
}

But on focus the search button is not changing.

Any help is highly appreciated. Thanks in advance.

Upvotes: 1

Views: 502

Answers (1)

Abdelrahman Wahdan
Abdelrahman Wahdan

Reputation: 2065

HTML

 <input class="foo" type="text" name="email" placeholder="Your Email Here" value="">
 <input class="newsletter-submit" type="submit" value="">

CSS

.newsletter input[type="text"]{
  background:transparent;
  color: $white;
  border: 1px solid $white;
  font-family: 'sorts-mill-goudy'; font-style: italic;
}
input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil.png") no-repeat;
  width:21px;
  height: 21px;
  position: absolute;
  border: none;
  right:50px;
  top:25px;
}

.foo:focus + input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil-hover.png") no-repeat !important;
}

Note:

  1. I added foo class to the input text.
  2. I added the "+" in the css.

.foo:focus + input.newsletter-submit

Upvotes: 2

Related Questions