Background color on input type=button :hover state sticks in IE

Question

I have an input type=button with a background color set and a different one on :hover - see http://jsfiddle.net/hc2Eu/3/

In IE (all versions) - when I mouse down on the button, move off the button, then mouseup - the background color stays in the :hover setting until you mouse over it again.

Is there some workaround for this? Preferably not with js? (IE6 not necessary)

Solution 1

There might be a fix to <input type="button"> - but if there is, I don't know it.

Otherwise, a good option seems to be to replace it with a carefully styled a element.

Example: http://jsfiddle.net/Uka5v/

.button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

Upsides include that the a element will style consistently between different (older) versions of Internet Explorer without any extra work, and I think my link looks nicer than that button :)

Solution 2

Try using the type attribute selector to find buttons (maybe this'll fix it too):

input[type=button]
{
  background-color: #E3E1B8; 
}

input[type=button]:hover
{
  background-color: #46000D
}

Solution 3

You need to make sure images come first and put in a comma after the background image call. then it actually does work:

    background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */

Comments

[ScottR]

It's not a CSS selection issue - the colours are applied correctly. There some issue with moving the mouse out of a button when the it is in the active state - same problem with <button>.

[ScottR]

I had thought of that - but I'm dealing with a pre-existing system that had logic assigned to input elements, and form submissions, etc (please don't ask for details :) Refactoring all that code just to fix an IE glitch might not be worth it.

[Blender]

Hmm. I guess it's time to beat the computer and yell obsceneties, as I'm not sure how to trick IE to do this.

[ScottR]

Giving you the accepted answer - because I don't think this is possible with standard button elements.

[Peter Ehrlich]

Gradients and transitions don't work together seems to be the only answer: stackoverflow.com/questions/3790273/…