CSS: удалить тени на отключенных кнопках HTML - PullRequest
Новая
       21

CSS: удалить тени на отключенных кнопках HTML

14 голосов
/ 07 января 2012

При отключении кнопок HTML к тексту кнопки добавляется тень. Я сам создаю стиль кнопок, и мне бы хотелось, чтобы у меня был только один цвет (белый) без тени, но я не знаю, как это сделать эффективно.

Мой предыдущий метод состоял в том, чтобы оставить его включенным и изменить стиль наведения кнопки + активные состояния и игнорировать клик vai Javascript. Сказал тебе, не очень эффективно!

http://jsfiddle.net/gLfMX/

РЕДАКТИРОВАТЬ: изображение для отображения тени (просматривается в IE9) + увеличенная версия.

enter image description here

Ответы [ 5 ]

9 голосов
/ 19 апреля 2013

Вы уже опубликовали свой собственный ответ, но здесь немного больше информации.

Из моих экспериментов я пришел к такому же выводу: в IE вы не можете изменить его с CSS. Вот почему.

Цвет отключенных кнопок зависит от того, что в Windows настроено для отображения для элемента «3D-объекты» в «Цвет и вид окна» (в настройках дисплея).

Цвета по умолчанию для отключенных кнопок: text = A0A0A0, shadow = white. Они могут отличаться, если пользователь изменил настройки по умолчанию (в Windows 7 для этого нужно перейти в «дополнительные настройки»), но почти у всех они будут. Они были разработаны так, чтобы соответствовать системному цвету фона по умолчанию для отключенной кнопки, то есть F4F4F4.

enter image description here

Мое решение для этой проблемы состоит в том, чтобы спроектировать CSS так, чтобы по крайней мере для настроек по умолчанию в IE отключенная кнопка выглядела хорошо - лучший подход - установить фон при выключенном F4F4F4: 

button[disabled], a[disabled] {
    background-color: #f4f4f4;
}

Если вы используете Bootstrap , как я, вы должны сделать это вместо: 

.btn[disabled], .btn.disabled[disabled] {
    background-color: #f4f4f4;
}

Вы также можете добавить условный селектор, чтобы включить его только для IE.

8 голосов
/ 07 января 2012

добавить border:none;, чтобы избавиться от тени jsfiddle

4 голосов
/ 07 января 2012

После нескольких часов возни я пришел к выводу, что это невозможно сделать с помощью IE.

Поскольку я обрабатываю все нажатия кнопок с помощью jQuery, я просто игнорирую любую кнопку, к которой применено мое свойство CSS selected.,Конечно, это, вероятно, не самое элегантное решение, но это кросс-браузерная область просмотра.

Спасибо Николь и Данферту за помощь.

1 голос
/ 14 апреля 2015

Вот пример того, как убрать затенение текста внутри кнопки. Я пытался избавиться от затенения на кнопках меню.

После того, как я использовал стили 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»

0 голосов
/ 07 января 2012

Это также работает: 

input[disabled] {
   border: none;
}

http://jsfiddle.net/gLfMX/2/

Таким образом, вы можете специально предназначаться для отключенного входа, не беспокоясь о помехах другим.

...