Стайл отключил кнопку с CSS

Я пытаюсь изменить стиль кнопки со встроенным изображением, как замечено в следующей Скрипке:

http://jsfiddle.net/krishnathota/xzBaZ/1/

В примере нет никаких изображений, я боюсь.

Я пытаюсь:

    Изменение <лития> цвет фона кнопки, когда это отключено
  1. Изменяет изображение в кнопке, когда это отключено
  2. Отключает эффект парения, когда отключено
  3. , Когда вы нажимаете на изображение в кнопке и тянете его, изображение, может быть замечен отдельно; я хочу избежать что
  4. текст на кнопке может быть отобран. Я хочу избежать этого, также.

Я пытался делать в кнопке [отключенной] . Но некоторые эффекты не могли быть отключены. как вершина: 1 пкс; положение: родственник; и изображение.

129

8 ответы

Для отключенных кнопок можно использовать : отключенный псевдоэлемент. Это работает на все элементы.

Для браузеров/устройств, поддерживающих CSS2 только, можно использовать [отключенный] отборщик.

Как с изображением, не помещайте изображение в кнопку. Используйте CSS фоновое изображение с второстепенное положение и второстепенное повторение . Тем путем перемещение изображения не произойдет.

Selection problem: here is a link to the specific question:

Пример для отборщика с ограниченными возможностями:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}
<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>
</div> </div>

175
добавлено
нуждается во фрагменте кода о том, как использовать : отключенный
добавлено автор bharal, источник
работавший для меня...
добавлено автор Ziggler, источник
Только, чтобы отметить, = "верный" часть , отключенного = "верный" , не то, что делает, это отключило. Вы могли использовать отключенный = "ложный" или , отключенный = "кошка" , и это было бы все еще отключено. Или просто имейте отключенный без стоимости. Та собственность может только быть, представляют/опускают в HTML или добавил с помощью JavaScript с истинным/ложным
добавлено автор Ryan, источник
Насколько я знаю, : отключенный отборщик - отборщик CSS3. фоновое изображение , второстепенное повторение , второстепенное положение работают в CSS 2.
добавлено автор beerwin, источник
[отключенный] несомненно работал бы
добавлено автор beerwin, источник
Обновленный мой ответ, спасибо за головы.
добавлено автор beerwin, источник
Applyable к CSS 2 или 3 (или оба)?
добавлено автор ViniciusPires, источник
Таким образом, возможно, выполнение a: отключенный, [отключенный] работал бы в CSS2 & 3?
добавлено автор ViniciusPires, источник

Я думаю, что необходимо быть в состоянии нажать отключенную кнопку, используя следующее:

button[disabled=disabled], button:disabled {
   //your CSS rules
}
71
добавлено
Я могу отключить Парение?? и я слышал, что это не будет работать в IE6?
добавлено автор Krishna Thota, источник
Я надеваю; t думают, что вы можете, но I' m не уверенных 100%. Если вы могли бы также добавить класс отключенных на отключенные кнопки тогда, вы могли бы, вероятно, сделать это через тот класс.
добавлено автор Billy Moat, источник

Добавьте ниже кода на вашей странице. Доверяйте мне, никакие изменения, внесенные, чтобы застегнуть события, калечить/позволять кнопку просто, не добавляют/удаляют класс кнопки в JavaScript.

Метод 1

 


Метод 2




24
добавлено
Точно, что я искал. Кнопка отключена, но выглядит позволенной!
добавлено автор Domi, источник
Чтобы чувствовать отключенную кнопку добавляют ниже цвета кода CSS: #c0c0c0; цвет фона: #ffffff;
добавлено автор Tamilselvan K, источник

Применять серую кнопку CSS для отключенной кнопки.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}
8
добавлено

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

.v-button{
    opacity:1;    
}
1
добавлено

Для всех нас использующих ремешок ботинка, можно изменить стиль, добавив "отключенный" класс и используя следующее:

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Помните, что добавление "отключенного" класса не обязательно отключает кнопку, например в представить форме. Чтобы отключить его поведение используют отключенную собственность:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

Рабочая скрипка с некоторыми примерами доступна здесь.

1
добавлено

By CSS:

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Them you can add any decoration to that button. For change the status you can use jquery

$("#id").toggleClass('disable');
1
добавлено
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
 // apply CSS here what u like it will definitely work...
}
1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)