Colore testo input disattivato

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

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)?

UPDATE:
Grazie per le vostre risposte. Non ho più bisogno di questo per il mio lavoro (invece di disabilitare sto sostituendo gli elementi input con elementi di stile div), ma sono ancora curioso di sapere perché questo succede e se c'è un modo per controllare questo comportamento ...

<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>

fonte

2008-11-04 Incidently

@ La risposta di Kemo di seguito è corretta - è necessario confermare e accettarlo. – philfreo

132

-webkit-text-fill-color:#880000

fonte

2011-01-10 15:21:54 Kemo

solo questa soluzione funziona per me.! rip up.! grazie – kajo

+43

Volevo che la mia casella di input disabilitata assomigliasse a una normale. Questa è l'unica cosa che potrebbe funzionare in Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-opacity: 1; sfondo: bianco; – Ryan

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

È possibile utilizzare un pulsante anziché 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>

fonte

2008-11-04 16:56:21

non proprio ... nella mia vera applicazione quelle caselle di testo sono normalmente abilitate e utilizzate per l'input, e solo in determinate condizioni vengono disabilitate con JavaScript Posso capire una soluzione alternativa (come, sostituire con uno stile

invece di impostare ' disabilitato ') - ma sembra davvero sbagliato – Incidently

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

FYI,

opacity: 1!important;

non ha la priorità, così io non sono sicuro che sia l'opacità.

fonte

2008-11-04 23:22:57

grazie! Non sono riuscito a trovare una spiegazione (niente di simile nel foglio di stile di user-agent di Chrome - solo "background-color: rgb (235, 235, 228)" per input disabilitati) e sto usando una soluzione alternativa, ma ancora curioso continua ... – Incidently

Steve, grazie per lo sforzo, ma suggerisco in futuro di postare questo come commento piuttosto che come risposta. – avernet

grazie! questo è – Jonathan

si potrebbe cambiare colore al #440000 solo per Safari, ma secondo me la soluzione migliore sarebbe quella di non cambiamento sembra di pulsante affatto. In questo modo, in ogni browser su ogni piattaforma, apparirà esattamente come gli utenti si aspettano.

fonte

2008-11-05 00:00:23 Kornel

È possibile utilizzare l'attributo readonly anziché l'attributo disabilitato, ma è necessario aggiungere una classe perché non esiste un input 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 ingresso disabilitato e l'input di sola lettura non sono gli stessi. Un input di sola lettura può avere lo stato attivo e invierà i valori su submit. Guarda w3.org

fonte

2008-11-05 16:27:44 Serxipc

grazie uomo sì, questa è stata anche la mia prima idea, ma non funziona per me a causa della messa a fuoco: su iPhone la tastiera si apre quando un utente tocca un elemento readonly, e questo è confuso Ho ho trovato la mia soluzione, e la mia domanda è piuttosto 'teorica' - perché questo comportamento? – Incidently

Una soluzione interessante: il problema di messa a fuoco pone anche problemi di usabilità, in particolare per le persone che utilizzano screen reader. Nella maggior parte dei casi, non vorreste che gli utenti fossero in grado di eseguire il tab in campi readonly/disabled in un modulo. – avernet

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

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

fonte

2010-06-01 16:09:23 conceptDawg

e per Firefox, utilizzare input: -moz-placeholder –

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 anche se – philfreo

Phone e Tablet browser WebKit (Safari e Chrome) e del desktop di IE hanno una serie di modifiche di default per disabili elementi del modulo che è necessario eseguire l'override se si vuole per modellare gli 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 */

fonte

2014-05-07 07:20:59 lijinma

per @ Ryan

Volevo che la mia casella di immissione disabilitato per assomigliare ad uno normale. Questa è l'unica cosa che potrebbe funzionare in Safari Mobile.

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

fonte

2017-07-20 08:31:31 vanduc1102

Colore testo input disattivato

risposta

Problemi correlati