title: How to set CSS hover on input
body: <p>I have this <code>input</code> button:</p>
  
  <pre><code>&lt;input class="btn" type="submit" id="query" name="query" value="Q" title="Query"&gt;
  </code></pre>
  
  <p>And this is the <code>CSS</code>:</p>
  
  <pre><code>.btn {
      cursor:pointer;
      border: none;
      background: none;
      width: 20px;
      height: 20px;
  }
  
  input.btn[type="submit"]:hover {
      border: 1px solid black;
  }
  </code></pre>
  
  <p>So, as you can see on <code>hover</code> I want the button to have a border. It doesn't work. I have multiple buttons this is the reason for applying the settings for a whole <code>class</code>. </p>
  
  <p><a href="http://jsfiddle.net/su39u2td/" rel="nofollow">http://jsfiddle.net/su39u2td/</a></p>