Стиль отключена кнопка с CSS
Я пытаюсь изменить стиль кнопки со встроенным изображением, как показано в следующей скрипке:
в примере нет изображений, я боюсь.
- изменить background-color кнопки, когда она является инвалидом
- изменить изображение в кнопке, когда она отключена
- отключить эффект наведения, когда отключено
- когда вы нажимаете на изображение в кнопке и перетаскиваете его, изображение можно увидеть отдельно; я хочу избежать этого
- текст на кнопке может быть выбран. Этого я тоже хочу избежать.
Я пытался сделать в button[disabled] . Но некоторые эффекты нельзя было отключить. как top: 1px; position: relative; и изображения.
8 ответов
для отключенных кнопок вы можете использовать :disabled псевдо-элемент. Он работает для всех элементов.
для браузеров / устройств, поддерживающих только CSS2, вы можете использовать [disabled] селектор.
как и с изображением, не помещайте изображение в кнопку. Используйте CSS background-image С background-position и background-repeat . Таким образом, перетаскивание изображения не произойдет.
выбор проблемы: вот ссылка на конкретный вопрос:
пример для отключенного селектора:
Я думаю, вы должны иметь возможность выбрать отключенную кнопку, используя следующее:
добавьте приведенный ниже код на свою страницу. Поверьте мне, никаких изменений в событиях button, чтобы отключить / включить кнопку, просто добавьте / удалите класс button в Javascript.
Способ 1
Способ 2
чтобы применить серую кнопку CSS для отключенной кнопки.
Источник
Почему не работают CSS-стили?
Приветствую вас на сайте Impuls-Web!
В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.
Навигация по статье:
Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.
Кэширование браузера
Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.
Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.
Кэш браузера здесь очищается следующим образом:
- 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
- 2. Находим пункт «История» =>«История»
Во всех других браузерах кэш чистится аналогичным образом.
Кэширование на хостинге или на сайте
Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.
Ошибки в коде
Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.
Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.
Не правильно выбранный селектор
Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.
Как же всё таки определить правильно ли вы указали селектор или нет?
Я в таких случаях использую один очень простой прием, который называется задание красной рамки.
К примеру, я хочу изменить стили для блока на сайте.
- 1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.
Источник