Styling eine deaktivierte Eingabe nur mit CSS

Question

Ich habe eine Art seltsame Situation. Ich versuche, einen deaktivierten Eingabeknopf zu formatieren, weil ich einen lästigen Schwebeflug habe, der den Text weiß macht. Dies macht es für den Benutzer verwirrend, da es sich wie ein normaler Knopf verhält.

Ich habe ein paar Dinge ausprobiert, hauptsächlich CSS und ein paar jQuery Dinge. Ich möchte das in CSS behalten, wenn überhaupt beweglich.

Dies ist meine HTML, tut mir leid, es ist in einem Larvel Form Helfer.

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

und das ist, was der Browser

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

erzeugt und ich arbeite an so etwas wie diese

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

Jede Hilfe wäre wunderbar!

Answer 1

verwenden CSS (jsFiddle example):

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

Sie haben die meisten äußere Element auf der linken Seite und die meisten inneren Element auf der rechten Seite zu schreiben.

.btn:hover input:disabled würde alle deaktivierten Eingabeelemente auswählen, die in einem Element mit einer Klasse btn enthalten sind, das derzeit vom Benutzer aktiviert wird. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

---

By the way, Laravel (PHP) erzeugt den HTML - nicht der Browser:

I :disabled über [disabled] finden Sie diese Frage für eine Diskussion bevorzugen.

Answer 2

Ein Leerzeichen in einem CSS-Selektor wählt untergeordnete Elemente aus.

.btn input 

Dies ist im Grunde, was Sie geschrieben haben, und es wäre <input> Elemente innerhalb jedes Element auswählen, das die btn Klasse.

Ich glaube, du bist für

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

suchen Dies würde wählen <input> Elemente mit dem Attribut disabled und der btn Klasse in den drei verschiedenen Zuständen hover, active und focus.

Answer 3

Lasst uns einfach sagen, Sie 3 Tasten haben:

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

die deaktivierte Schaltfläche, um Stil Sie folgende CSS verwenden können:

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

die Schaltfläche beeinflussen Dies wird nur die deaktiviert ist.

Um den Farbwechsel zu stoppen, wenn Schweben Sie diese verwenden:

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

Sie können dies durch die Verwendung eines CSS-Reset auch vermeiden.