Я'пытаюсь изменить стиль кнопки со встроенным изображением, как показано в следующем Fiddle:
В примере нет изображений, я боюсь.
I'trying to:
цвет фона
кнопки, когда она отключенаЯ попробовал сделать в button[disabled]
. Но некоторые эффекты не могут быть отключены. например
top: 1px; position: relative;
и image.
Для отключенных кнопок можно использовать псевдоэлемент :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>
Я думаю, что вы должны иметь возможность выбрать отключенную кнопку, используя следующее:
button[disabled=disabled], button:disabled {
// your css rules
}
Добавьте приведенный ниже код на вашу страницу. Поверь мне, нет изменения, внесенные в кнопку события, чтобы отключить/включить кнопку просто добавить/удалить кнопку Класс в 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>
Применить серые кнопки 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;
}
Для всех нас с помощью Bootstrap, вы можете изменить стиль, добавив в "отключен" Класс и, используя следующие:
В формате HTML
<button type="button"class="btn disabled">Text</button>
УСБ
.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:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
Рабочая скрипка с некоторых примеров можно найти [здесь][1].
Когда кнопка отключена, он напрямую задает непрозрачность. Так что в первую очередь мы должны установить его непрозрачность как
.v-button{
opacity:1;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
Нужно обратиться в CSS как belows:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
рассмотрим следующее решение
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}