change style of button on focus of input box

Question

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/

Answer 1

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>

Answer 2

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>