Цвет фона на типе ввода = кнопка: состояние зависания в IE - PullRequest
Новая
       24

Цвет фона на типе ввода = кнопка: состояние зависания в IE

8 голосов
/ 12 апреля 2011

У меня есть тип ввода = кнопка с установленным цветом фона и другой: hover - см. http://jsfiddle.net/hc2Eu/3/

В IE (все версии) - когда я нажимаю кнопку мыши, нажимаю на кнопку, затем нажимаю кнопку мыши - цвет фона остается в настройке: hover, пока вы снова не наведете курсор мыши на него.

Есть ли какое-то решение для этого? Желательно не с JS? (IE6 не требуется)

Ответы [ 3 ]

13 голосов
/ 12 апреля 2011

Возможно, исправлено <input type="button"> - но если и есть, то я не знаю.

В противном случае хорошим вариантом является замена его на тщательно стилизованный элемент a.

Пример: 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
}

Перевернутая сторона включает в себя то, что элемент a будет согласовывать стили для разных (более старых) версий Internet Explorer без какой-либо дополнительной работы, и я думаю, что моя ссылка выглядит лучше, чем эта кнопка:)

7 голосов
/ 12 апреля 2011

Попробуйте использовать селектор атрибутов type, чтобы найти кнопки (возможно, это тоже исправится): 

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

input[type=button]:hover
{
  background-color: #46000D
}
1 голос
/ 08 июня 2011

Вы должны убедиться, что изображения идут первыми и вставляются в запятую после вызова фонового изображения.тогда это действительно работает: 

    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 */
...