Colore del testo di input disabilitato

93

Il semplice codice HTML riportato di seguito viene visualizzato in modo diverso nei browser basati su Firefox e WebKit (ho verificato in Safari, Chrome e iPhone).

In Firefox sia il bordo che il testo hanno lo stesso colore ( #880000), ma in Safari il testo diventa un po 'più chiaro (come se fosse applicato un po' di trasparenza).

Posso in qualche modo risolvere questo problema (rimuovere questa trasparenza in Safari)?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    input:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="disabled input box" disabled="disabled"/>
    </form>
</body>
</html>

— Incidentalmente
fonte

Ho notato anche questo, per me questo è un bug, poiché quando metti background-color: il bianco dell'input mostrerà nuovamente il colore correttamente. Anche l'opacità ha scarso effetto. Sebbene il -webkit-text-fill-color: # 880000 funzionerà

— Miguel

235

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

— Kemo
fonte

51

Volevo che la mia casella di input disabilitata sembrasse normale. Questa è l'unica cosa che funzionerebbe in Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-opacità: 1; sfondo: bianco;

— Ryan

11

@ Ryan ha ragione: l'opacità deve essere impostata 1su Mobile Safari.

— David Jones

7

opacity:1è anche necessario.

— Marcel Falliere

3

L'opacità non è necessaria nelle build attuali di Safari, a partire dall'estate 2016.

— Andy Mercer,

2

Mi ha salvato la giornata! Tuttavia influisce anche sulla colorazione del placeholdercolore del testo inputdell'elemento. Nel caso avessi bisogno di una correzione anche per questo, guarda questo link: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

I browser webkit del telefono e del tablet (Safari e Chrome) e IE desktop hanno una serie di modifiche predefinite agli elementi del modulo disabilitati che dovrai sovrascrivere se desideri applicare uno stile agli input disabilitati.

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

— lijinma
fonte

6

è una domanda interessante e ho provato molte sostituzioni per vedere se riesco a farlo funzionare, ma non funziona niente. I browser moderni utilizzano effettivamente i propri fogli di stile per dire agli elementi come visualizzare, quindi forse se riesci a fiutare il foglio di stile di Chrome puoi vedere quali stili stanno imponendo. Sarò molto interessato al risultato e se non ne hai uno passerò un po 'di tempo a cercarlo io stesso più tardi quando avrò del tempo da perdere.

Cordiali saluti,

opacity: 1!important;

non lo sovrascrive, quindi non sono sicuro che sia opacità.

— Steve Perks
fonte

Grazie! Non sono riuscito a trovare una spiegazione (niente del genere nel foglio di stile dell'agente utente di Chrome - solo "background-color: rgb (235, 235, 228)" per input disabilitati) e sto usando una soluzione alternativa, ma sono ancora curioso di sapere cosa sta succedendo il ...

— Incidentalmente il

Steve, grazie per lo sforzo, ma ti suggerisco in futuro di postarlo come commento piuttosto che come risposta.

— avernet

6

Si potrebbe cambiare il colore di #440000solo per Safari, ma secondo me la soluzione migliore sarebbe quella di non cambiamento sguardi di pulsante a tutti . In questo modo, in ogni browser su ogni piattaforma, sembrerà proprio come gli utenti si aspettano.

— Kornel
fonte

5

AGGIORNATO 2019:

Combinando le idee di questa pagina in una soluzione "imposta e dimentica".

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

— paulcol.
fonte

4

Puoi usare l'attributo readonly invece dell'attributo disabled, ma poi dovrai aggiungere una classe perché non c'è un input di pseudo-classe: readonly.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

Attenzione che un input disabilitato e un input di sola lettura non sono la stessa cosa. Un input di sola lettura può essere attivo e invierà valori al momento dell'invio. Guarda w3.org

— Serxipc
fonte

grazie amico sì, anche questa è stata la mia prima idea, ma non funziona per me a causa del focus: su iPhone la tastiera si apre quando un utente tocca un elemento di sola lettura, e questo è fonte di confusione ho trovato la mia soluzione, e la mia la domanda è piuttosto "teorica": perché questo comportamento?

— Incidentalmente il

Una soluzione interessante: il problema del focus pone anche problemi di usabilità, in particolare per le persone che utilizzano lettori di schermo. Nella maggior parte dei casi, semplicemente non vorresti che gli utenti fossero in grado di tabulare i campi di sola lettura / disabilitazione in un modulo.

— avernet

4

per @ryan

Volevo che la mia casella di input disabilitata sembrasse normale. Questa è l'unica cosa che funzionerebbe in Safari Mobile.

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

— vanduc1102
fonte

3

Se si desidera risolvere il problema per tutti gli ingressi disabilitati, è possibile definire -webkit-text-fill-colora currentcolor, quindi colorverrà utilizzata la proprietà dell'ingresso.

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

Vedi quel violino su Safari https://jsfiddle.net/u549yk87/3/

— Freez
fonte

2

Questa domanda è molto vecchia ma ho pensato di pubblicare una soluzione webkit aggiornata. Usa il seguente CSS:

input::-webkit-input-placeholder {
  color: #880000;
}

— conceptDawg
fonte

3

e per Firefox, utilizzare input: -moz-placeholder

— stephan.com

1

eh .. questo è per l'attributo segnaposto, non credo che abbia un effetto sui campi disabilitati. La risposta di @ Kemo sotto ( -webkit-text-fill-color) funziona però

— philfreo

0

Puoi usare un pulsante invece di un input?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>

non proprio ... nella mia vera applicazione quelle caselle di testo sono solitamente abilitate e utilizzate per l'input, e solo in determinate condizioni vengono disabilitate con JavaScript posso trovare una soluzione alternativa (come, sostituire <input /> con uno stile <div> < / div> invece di impostare 'disabled') - ma sembra davvero sbagliato

— Incidentalmente il