Styling di un input disabilitato con css solo

Question

Ho una specie di strana situazione. Sto provando a modellare un pulsante di input disabilitato perché ho un passaggio del mouse fastidioso che trasforma il testo in bianco. Questo lo rende confuso all'utente perché agisce come un normale pulsante.

Ho provato alcune cose, principalmente css e alcune cose jQuery. Mi piacerebbe tenerlo in css se non del tutto possibile.

Questo è il mio html, mi dispiace è in una forma di aiuto larvel.

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

e questo è ciò che il browser genera

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

e stavo lavorando a qualcosa di simile

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

Qualsiasi aiuto sarebbe meraviglioso!

Answer 1

Utilizzare questa CSS (jsFiddle example):

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

Dovete scrivere l'elemento più esterno a sinistra e l'elemento più interno sulla destra.

.btn:hover input:disabled selezionare qualsiasi elemento di input disabilitato contenuto in un elemento con una classe btn attualmente al passaggio del mouse da parte dell'utente.

preferirei :disabled sopra [disabled], vedere questa domanda per una discussione: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

---

A proposito, laravel (PHP) genera il codice HTML - non il browser.

Answer 2

Uno spazio in un selettore CSS seleziona elementi figlio.

.btn input 

Questo è fondamentalmente ciò che hai scritto e sarebbe selezionare <input> elementi all'interno di ogni elemento che possiede la classe btn.

Penso che tu sia alla ricerca di

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

Questo sarebbe selezionare <input> elementi con l'attributo disabled e la classe btn nei tre diversi stati di hover, active e focus.

Answer 3

Diciamo solo che si dispone di 3 pulsanti:

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

per lo stile il pulsante disabilitato è possibile utilizzare il seguente CSS:

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

Questo avrà effetto solo il pulsante che è disabilitato.

Per fermare il cambiamento di colore quando si libra si può usare anche questo:

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

È inoltre possibile evitare questo utilizzando un CSS-reset.