How to set CSS hover on input
<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>