CODEWITHSUNDEEP
htmlcss
Ajinkya Pisal
Ajinkya Pisal

Reputation: 591

change style of button on focus of input box

Problem: I want to change style of button on focus of input element.

Here is the template code:

<input type="text"></input>
  <span>
    <button class="search">Poor Me!</button>
  </span>

Here is the css code:

.search-form input:focus{
  border: 1px solid #009BC6;
  outline: none;
}

.search-form input:focus + .search{
  background-color: #009BC6;
  outline: none;
}

Expected Output: On focus of input box
1. Apply border of 1x width to input box
2. Change background color of button

Actual Output:
1. Border is applied to input box
2. No changes in background color of button

http://jsfiddle.net/6Y8GL/7/

Upvotes: 5

Views: 16801

Answers (4)

Rahul Desai
Rahul Desai

Reputation: 15481

Instead of .search-form input:focus + .search , use input:focus ~ span > #btnClick

Updated jsFiddle

Working Demo:

input:focus{
    border: 2px solid green;
}

input:focus ~ span > #btnClick{
   background: red;
}
<input type="text"></input>
<span>
    <button id="btnClick">Click Me!</button>
</span>

Upvotes: 0

anthumchris
anthumchris

Reputation: 9072

Try CSS:

input + span button {
    background :blue;
}
input:focus + span button {
    background :red;
}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Remove span around your button. The symbol + called next immediate sibling. According to your markup button is not next immediate sibling element.

<input type="text"></input>
<button class="search">Poor Me!</button>

Upvotes: 2

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo -http://jsfiddle.net/6Y8GL/8/

input:focus ~ span #btnClick {
 background: red;
}

css cant find the #btnclick because it is not the sibling of the input you should be more specific, target the span and then #btnClick 

input:focus {
  border: 2px solid green;
}
input:focus ~ span #btnClick {
  background: red;
}
<input type="text"></input>
<span>
    <button id="btnClick">Click Me!</button>
</span>

Upvotes: 8

Related Questions