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

User · Answer

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

User · Answer

There might be a fix to  lt input type  button  gt  - 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

User · Answer

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

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

Examples related to css

Examples related to internet-explorer

Examples related to hover

Examples related to background-color