Passe e Ative somente quando não estiver desabilitado - css

eu uso flutuar, ativo e Desativado para estilizar botões.

Mas o problema é quando o botão está desabilitado, os estilos de foco e ativo ainda se aplicam.

Como aplicar o foco e ativo apenas nos botões ativados?

Respostas:

170 para resposta № 1

Você pode usar :ativado pseudo-classe, mas aviso prévio IE<9 não suporta:

button:hover:enabled{
/*your styles*/
}
button:active:enabled{
/*your styles*/
}

---

27 for answer № 2

.button:active:hover:not([disabled]) {
/*your styles*/
}

Você pode tentar isso ..

---

22 for answer № 3

Por que não usar o atributo "disabled" no css. Isso deve funcionar em todos os navegadores.

button[disabled]:hover {
background: red;
}
button:hover {
background: lime;
}

---

6 para resposta № 4

No sass (scss):

 button {
color: white;
cursor: pointer;
border-radius: 4px;

&:disabled{
opacity: 0.4;

&:hover{
opacity: 0.4;  //this is what you want
}
}

&:hover{
opacity: 0.9;
}
}

---

3 para resposta № 5

Uma abordagem de baixa especificidade que funciona na maioria dos navegadores modernos (IE11 + e excluindo alguns navegadores Opera e IE para dispositivos móveis - http://caniuse.com/#feat=pointer-events):

.btn {
/* base styles */
}

.btn[disabled]
opacity: 0.4;
cursor: default;
pointer-events: none;
}

.btn:hover {
color: red;
}

o pointer-events: none regra desabilitará pairar; você não precisa aumentar a especificidade com um .btn[disabled]:hover seletor para anular o estilo de foco.

(FYI, este é o simples ponteiro-eventos HTML, não o contencioso abstracting-input-dispositivos ponteiro-eventos)

---

1 para resposta № 6

Uma maneira é adicionar uma classe parcial enquantodesabilitando botões e sobrescrevendo os estados ativo e ativo para essa classe em css. Ou removendo uma classe ao desabilitar e especificar as opções de hover e pseudo ativas nessa classe somente em css. De qualquer forma, provavelmente não pode ser feito apenas com css, você precisará usar um pouco de js.

---

1 para resposta № 7

Se você estiver usando LESS ou SassVocê pode tentar isto:

.btn {
&[disabled] {
opacity: 0.6;
}
&:hover, &:active {
&:not([disabled]) {
background-color: darken($orange, 15);
}
}
}

---