web-dev-qa-db-fra.com

Couleur d'arrière-plan sur le bouton de type d'entrée =: l'état de survol reste dans IE

J'ai un bouton de type d'entrée = avec un jeu de couleurs d'arrière-plan et un autre sur: survoler - voir http://jsfiddle.net/hc2Eu/3/

Dans IE (toutes les versions) - lorsque je souris sur le bouton, déplacez le bouton, puis mouseup - la couleur d'arrière-plan reste dans le paramètre: hover jusqu'à ce que vous la survoliez à nouveau.

Y a-t-il une solution à cela? De préférence pas avec js? (IE6 non nécessaire)

cssinternet-explorerhoverbackground-color
8
ScottR

Il pourrait y avoir un correctif pour <input type="button"> - mais s'il y en a, je ne le sais pas.

Sinon, une bonne option semble être de le remplacer par un élément a soigneusement conçu.

Exemple: 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
}

Les avantages incluent que l'élément a stylera de manière cohérente entre les différentes versions (plus anciennes) d'Internet Explorer sans aucun travail supplémentaire, et je pense que mon lien est plus joli que ce bouton :)

13
thirtydot

Essayez d'utiliser le sélecteur d'attribut type pour trouver des boutons (peut-être que cela le corrigera aussi):

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

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

Vous devez vous assurer que les images viennent en premier et les mettre dans une virgule après l'appel de l'image d'arrière-plan. alors ça marche vraiment:

    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 */
1
Jason Paul