Stylisation de l'entrée déconnectée uniquement avec css

J'ai une situation étrange. J'essaie d'élégant un bouton d'entrée désactivé, car j'ai une guidage gênante du curseur qui transforme le texte en blanc. Cela le rend confus pour l'utilisateur, car il agit comme un bouton régulier.

J'ai essayé quelques choses surtout css et plusieurs jQuery de choses. Je voudrais le garder dans css, Si cela est généralement possible.

C'est mon html, Désolé que c'est sous la forme d'une larve adjointe.


{{ Form::submit/'Change', array_merge/$design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3']// }}


Et c'est ce que le navigateur génère


<input class="btn btn-blue span3" disabled="disabled" type="submit" value="Change"/>


et j'ai travaillé sur quelque chose comme ça


.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
color:green
}


Toute aide serait merveilleuse!
Invité:

Christine

Confirmation de:

Utilise le CSS /
http://jsfiddle.net/5vnHX/446/
/:


input:disabled.btn:hover,
input:disabled.btn:active,
input:disabled.btn:focus {
color: green
}


Vous devez écrire l'élément le plus externe à gauche et l'élément interne à droite.


.btn:hover input:disabled

choisira tous les éléments d'entrée déconnectés contenus dans l'élément de classe
btn

, Qui est actuellement accroché à l'utilisateur.

je préférerais
:disabled

au lieu
[disabled]

, Voir ce problème pour la discussion:
https://coderoad.ru/20141450/
D'ailleurs, Laravel /PHP/ Génère HTML - Pas un navigateur.

Agathe

Confirmation de:

Disons donc vous avez 3 Boutons:


<input disabled="disabled" type="button" value="hello world"/>
<input disabled="" type="button" value="hello world"/>
<input type="button" value="hello world"/>


Pour styler un bouton désactivé, vous pouvez utiliser ce qui suit. css:


input[type="button"]:disabled{
color:#000;
}


Cela affectera uniquement le bouton désactivé.

Pour arrêter le changement de couleur lorsque vous survolez le curseur, vous pouvez également l'utiliser:


input[type="button"]:disabled:hover{
color:#000;
}


Vous pouvez également éviter cela en utilisant css-reset.

Agathe

Confirmation de:

Espace dans le sélecteur CSS Sélectionne les éléments enfants.


.btn input


C'est fondamentalement ce que vous avez écrit et il choisira
<input/>

éléments à l'intérieur de tout élément ayant une classe
btn

.

Je pense que tu cherches


input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus


Cela permettrait de choisir
<input/>

Élément avec attribut
disabled

et classe
btn

Dans trois états différents
hover

,
active

et
focus

.

Pour répondre aux questions, connectez-vous ou registre