title: change style of button on focus of input box
body: <p>Problem:
  I want to change style of button on focus of input element. </p>
  
  <p>Here is the template code:</p>
  
  <pre><code>&lt;input type="text"&gt;&lt;/input&gt;
    &lt;span&gt;
      &lt;button class="search"&gt;Poor Me!&lt;/button&gt;
    &lt;/span&gt;
  </code></pre>
  
  <p>Here is the css code:</p>
  
  <pre><code>.search-form input:focus{
    border: 1px solid #009BC6;
    outline: none;
  }
  
  .search-form input:focus + .search{
    background-color: #009BC6;
    outline: none;
  } 
  </code></pre>
  
  <p>Expected Output:
  On focus of input box<br>
  1. Apply border of 1x width to input box<br>
  2. Change background color of button<br></p>
  
  <p>Actual Output:<br>
  1. Border is applied to input box<br>
  2. No changes in background color of button<br></p>
  
  <p><a href="http://jsfiddle.net/6Y8GL/7/" rel="noreferrer">http://jsfiddle.net/6Y8GL/7/</a></p>