Come cambiare il colore del carattere per l’input disabilitato?

Ho bisogno di cambiare lo stile per un elemento di input disabilitato nei CSS.

 

Come posso fare questo per Internet Explorer?

Non è ansible per Internet Explorer.

Vedi questo commento Ho scritto su un argomento correlato:

Non sembra essere un buon modo, vedi: Come cambiare il colore dei controlli html disabilitati in IE8 usando css – puoi invece impostare l’input in readonly , ma questo ha altre conseguenze (come con readonly , l’ input sarà inviato al server su invio, ma con disabled , non sarà): http://jsfiddle.net/wCFBw/40

Inoltre, vedere: Modifica del colore dei caratteri in Caselle di testo in IE che sono disabilitati

Puoi:

 input[type="text"][disabled] { color: red; } 

Quanto segue ti avvicina molto a IE8 e funziona anche in altri browser.

Nel tuo html:

  onfocus="this.blur();"  tabindex="-1"  class="disabledInput"  /> 

Nel tuo CSS:

 .disabledInput { color: black; } 

In IE8, c’è una leggera variazione di colore del bordo al passaggio del mouse. Alcuni CSS per input.disabledInput: hover potrebbe probabilmente occuparsene.

 input[disabled], input[disabled]:hover { background-color:#444; } 

Sostituisci disabled con readonly="readonly" . Penso che sia la stessa funzione.

  

Sembra che nessuno abbia trovato una soluzione per questo. Non ne ho uno basato solo su css, ma usando questo trucco JavaScript di solito riesco a gestire i campi di input disabilitati.

Ricorda che i campi disabilitati seguono sempre lo stile che avevano prima di diventare disabilitati. Quindi il trucco sarebbe 1- Abilitarli 2-Cambiare la class 3- Disabilitarli di nuovo. Poiché ciò accade, l’utente molto veloce non può capire cosa è successo.

Un semplice codice JavaScript potrebbe essere qualcosa del tipo:

 function changeDisabledClass (id, disabledClass){ var myInput=document.getElementById(id); myInput.disabled=false; //First make sure it is not disabled myInput.className=disabledClass; //change the class myInput.disabled=true; //Re-disable it } 

È la soluzione che ho trovato per questo problema:

// Se IE

inputElement.writeAttribute (“unselectable”, “on”);

//Altri browser

inputElement.writeAttribute (“disabled”, “disabled”);

Utilizzando questo trucco, puoi aggiungere un foglio di stile all’elemento di input che funziona in IE e altri browser sulla casella di input non modificabile.

Puoi usare il seguente stile con opacità

 input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] { opacity: 0.85 !important; } 

o una specifica class CSS

 .ui-state-disabled{ opacity: 0.85 !important; } 

Questo funziona per fare in modo che le opzioni di selezione disabilitate agiscano come intestazioni. Non rimuove l’ombreggiatura di testo predefinita dell’opzione disabilitata, ma rimuove l’effetto hover. In IE non si ottiene il colore del font ma almeno l’ombra del testo è scomparsa. Ecco l’html e css:

   

Qui: https://jsfiddle.net/7vb3h0q4/2/