При отключении кнопок HTML в текст кнопки добавляется тень. Я сам моделирую кнопки, и я хотел бы иметь только один цвет (белый) без тени, но я не знаю, как это сделать эффективно.
Мой предыдущий метод состоял в том, чтобы оставить его включенным и повторно нарисовать кнопку hover + active state и игнорировать javascript click vai. Сказал вам, не очень эффективно!
EDIT: изображение, отображающее тень (просматривается в IE9) + увеличенная версия.
После нескольких часов работы я пришел к выводу, что это невозможно сделать с IE.
Так как я обрабатываю все нажатия кнопок с помощью jQuery, я просто игнорирую любую кнопку, у которой есть свойство выбранного CSS. Конечно, это, вероятно, не самое изящное решение, но это кросс-браузерная панель просмотра.
Спасибо Николь и Данферт за помощь.
Вы уже разместили свой собственный ответ, но здесь немного больше информации.
Из моих экспериментов я пришел к такому же выводу: в IE вы не можете изменить его из CSS. Вот почему.
Цвета отключенных кнопок зависят от того, что Windows настроено для отображения для элемента "3D-объекты" в "Цвет и внешний вид окна" ( в настройках дисплея).
По умолчанию цвета отключенных кнопок: text = A0A0A0, shadow = white. Они могут отличаться, если пользователь изменил настройки по умолчанию (в Windows 7 вы должны перейти в "дополнительные настройки", чтобы сделать это), но почти у всех это будет. Они были спроектированы так, чтобы соответствовать цвету системы по умолчанию для отключенной кнопки, которая F4F4F4.
Мое решение этой проблемы состоит в том, чтобы создать CSS так, чтобы, по крайней мере, для настроек по умолчанию, в IE отключенная кнопка будет выглядеть нормально - лучший подход - установить фон при отключении до F4F4F4:
button[disabled], a[disabled] {
background-color: #f4f4f4;
}
Если вы используете Bootstrap, как я, вы должны сделать это вместо:
.btn[disabled], .btn.disabled[disabled] {
background-color: #f4f4f4;
}
Вы также можете добавить некоторый условный селектор, чтобы включить это только для IE.
добавить border:none;, чтобы избавиться от тени jsfiddle
Вот пример того, как удалить затенение текста внутри кнопки. Я пытался избавиться от моего затенения на моих кнопках меню.
После того, как мой стиль меню стилизовал в CSS, я искал свое обычное меню. Где бы вы ни увидели стиль "text-shadow", в первую очередь ваша проблема. Я нашел здесь:
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:
#77778b;font-family:'Oswald', Arial, sans-serif;text-shadow:none;}
Моя тень текста была установлена на #FFFFFF с примененным позиционированием. Я просто удалил этот стиль и бам, больше не следил за моими кнопками.
Просто найдите везде, где "text-shadow" применяется сначала в вашем меню CSS и установите его в "text-shadow: none"
Это также работает:
input[disabled] {
border: none;
}
Таким образом, вы можете специально настроить таргетинг на отключенный вход, не беспокоясь о вмешательстве в другие.