Кнопка стиля отключена с помощью CSS

Question

Кнопка стиля отключена с помощью CSS

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

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

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

Я пытаюсь:

изменить background-color кнопки, когда она является инвалидом

изменить изображение в кнопке, когда она отключена

отключить эффект наведения, когда отключено

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

текст на кнопке можно выбрать. Я тоже хочу этого избежать.

Я пробовал делать в button[disabled]. Но некоторые эффекты нельзя было отключить. как
top: 1px; position: relative; и изображения.

906 8

css

8 ответов:

Comments

Ничего не найдено.

beerwin · Accepted Answer · 2018-02-26 16:34:46

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

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

как и с изображением, не помещайте изображение в кнопку. Используйте CSS background-image С background-position и background-repeat. Таким образом, перетаскивание изображения не будет происходить.

выбор проблемы: вот ссылка на конкретный вопрос:

как чтобы отключить выделение текста?

пример для отключенного селектора:
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>

Billy Moat · Accepted Answer · 2013-02-07 13:41:57

Я думаю, что вы должны быть в состоянии выбрать отключенную кнопку, используя следующее:
button[disabled=disabled], button:disabled {
    // your css rules
}

Tamilselvan K · Accepted Answer · 2017-11-17 17:49:53

добавьте код ниже на своей странице. Поверьте мне, никаких изменений, внесенных в события button, чтобы отключить/включить кнопку, просто добавьте/удалите класс button в Javascript.

Способ 1
 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>
Способ 2
<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

Nishanthi Grashia · Accepted Answer · 2015-06-02 13:10:19

чтобы применить серую кнопку 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;
}

Chetan · Accepted Answer · 2014-09-20 09:39:33

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

kushal baldev · Accepted Answer · 2017-05-30 08:10:00

когда ваша кнопка отключена, она напрямую устанавливает непрозрачность. Итак, прежде всего мы должны установить его непрозрачность как
.v-button{
    opacity:1;    
}

c-chavez · Accepted Answer · 2017-09-24 14:50:19

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

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;
}
помните, что добавление класса "disabled" не обязательно отключает кнопку, например, в форме отправки. Чтобы отключить его поведение, используйте свойство disabled:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
рабочая скрипка с некоторыми примерами доступна здесь.

Alvargon · Accepted Answer · 2017-11-13 17:33:00

By CSS:
.disable{
   cursor: not-allowed;
   pointer-events: none;
}
их вы можете добавить любое украшение к этой кнопке. Для изменения статуса вы можете использовать jquery
$("#id").toggleClass('disable');