Cor do texto de entrada desativada

Question 1

O HTML simples abaixo é exibido de maneira diferente nos navegadores Firefox e WebKit (verifiquei no Safari, Chrome e iPhone).

No Firefox, tanto a borda quanto o texto têm a mesma cor ( #880000), mas no Safari o texto fica um pouco mais claro (como se tivesse alguma transparência aplicada a ele).

Posso consertar isso de alguma forma (remover essa transparência no 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>

Question 2

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

Question 3

Navegadores de webkit de telefone e tablet (Safari e Chrome) e desktop IE têm uma série de alterações padrão para elementos de formulário desabilitados que você precisará substituir se quiser estilizar entradas desabilitadas.

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

Question 4

é uma pergunta interessante e tentei várias substituições para ver se consigo fazer isso funcionar, mas nada está funcionando. Navegadores modernos realmente usam suas próprias folhas de estilo para dizer aos elementos como exibir, então talvez se você puder farejar a folha de estilo do Chrome, você poderá ver quais estilos eles estão forçando. Ficarei muito interessado no resultado e se você não tiver ficarei um pouco mais tarde procurando por ele quando tiver algum tempo a perder.

PARA SUA INFORMAÇÃO,

opacity: 1!important;

não o substitui, então não tenho certeza se é opacidade.

Question 5

Você poderia mudar a cor #440000apenas para o Safari, mas IMHO a melhor solução seria não mudar a aparência do botão em tudo . Dessa forma, em todos os navegadores em todas as plataformas, ele terá a aparência que os usuários esperam.

Question 6

ATUALIZADO EM 2019:

Combinando as ideias desta página em uma solução "configure e esqueça".

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 */
}

Question 7

Você pode usar o atributo readonly em vez do atributo disabled, mas então você precisará adicionar uma classe porque não há uma entrada de 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>

Esteja ciente de que uma entrada desabilitada e uma entrada somente leitura não são a mesma coisa. Uma entrada somente leitura pode ter foco e enviará valores no envio. Olhe para w3.org

Question 8

para @ryan

Eu queria que minha caixa de entrada desativada parecesse normal. Esta é a única coisa que funcionaria no Safari Mobile.

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

Question 9

Se você quiser consertar o problema para todas as entradas desabilitadas, você pode definir -webkit-text-fill-colorpara currentcolor, então a colorpropriedade da entrada será usada.

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

Veja aquele violino no Safari https://jsfiddle.net/u549yk87/3/

Question 10

Esta pergunta é muito antiga, mas pensei em postar uma solução de webkit atualizada. Basta usar o seguinte CSS:

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

Question 11

Você pode usar um botão em vez de uma entrada?

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

Answer 1

O HTML simples abaixo é exibido de maneira diferente nos navegadores Firefox e WebKit (verifiquei no Safari, Chrome e iPhone).

No Firefox, tanto a borda quanto o texto têm a mesma cor ( #880000), mas no Safari o texto fica um pouco mais claro (como se tivesse alguma transparência aplicada a ele).

Posso consertar isso de alguma forma (remover essa transparência no 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>

Answer 2

Também notei isso, para mim isso é um bug, pois quando você coloca background-color: white da entrada vai mostrar a cor novamente corretamente. Além disso, a opacidade tem pouco efeito. Embora o -webkit-text-fill-color: # 880000 funcione

Miguel

Answer 3

235

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

Kemo
fonte

51

Eu queria que minha caixa de entrada desativada parecesse normal. Esta é a única coisa que funcionaria no Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-opacity: 1; fundo: branco;

Ryan

11

@Ryan está certo sobre - a opacidade deve ser definida como 1para Mobile Safari.

David Jones,

7

opacity:1também é necessário.

Marcel Falliere

3

A opacidade não é necessária nas compilações atuais do Safari, a partir do verão de 2016.

Andy Mercer

2

Salvei meu dia! No entanto, também afeta a coloração da cor do placeholdertexto do inputelemento. Caso você também precise de uma correção para ele, consulte este link: css-tricks.com/almanac/selectors/p/placeholder

Lentyai

Answer 4

51

Eu queria que minha caixa de entrada desativada parecesse normal. Esta é a única coisa que funcionaria no Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-opacity: 1; fundo: branco;

Ryan

Answer 5

11

@Ryan está certo sobre - a opacidade deve ser definida como 1para Mobile Safari.

David Jones,

Answer 6

7

opacity:1também é necessário.

Marcel Falliere

Answer 7

3

A opacidade não é necessária nas compilações atuais do Safari, a partir do verão de 2016.

Andy Mercer

Answer 8

2

Salvei meu dia! No entanto, também afeta a coloração da cor do placeholdertexto do inputelemento. Caso você também precise de uma correção para ele, consulte este link: css-tricks.com/almanac/selectors/p/placeholder

Lentyai

Answer 9

Navegadores de webkit de telefone e tablet (Safari e Chrome) e desktop IE têm uma série de alterações padrão para elementos de formulário desabilitados que você precisará substituir se quiser estilizar entradas desabilitadas.

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

Answer 10

6

é uma pergunta interessante e tentei várias substituições para ver se consigo fazer isso funcionar, mas nada está funcionando. Navegadores modernos realmente usam suas próprias folhas de estilo para dizer aos elementos como exibir, então talvez se você puder farejar a folha de estilo do Chrome, você poderá ver quais estilos eles estão forçando. Ficarei muito interessado no resultado e se você não tiver ficarei um pouco mais tarde procurando por ele quando tiver algum tempo a perder.

PARA SUA INFORMAÇÃO,

opacity: 1!important;

não o substitui, então não tenho certeza se é opacidade.

Steve Perks
fonte

obrigado! Não consegui encontrar uma explicação (nada parecido com a folha de estilo do agente do usuário do Chrome - apenas "background-color: rgb (235, 235, 228)" para entradas desativadas) e estou usando uma solução alternativa, mas ainda estou curioso para saber o que está acontecendo em ...

Incidentalmente

Steve, obrigado pelo esforço, mas sugiro que no futuro você poste isso como um comentário ao invés de uma resposta.

avernet

Answer 11

obrigado! Não consegui encontrar uma explicação (nada parecido com a folha de estilo do agente do usuário do Chrome - apenas "background-color: rgb (235, 235, 228)" para entradas desativadas) e estou usando uma solução alternativa, mas ainda estou curioso para saber o que está acontecendo em ...

Incidentalmente

Answer 12

Steve, obrigado pelo esforço, mas sugiro que no futuro você poste isso como um comentário ao invés de uma resposta.

avernet

Answer 13

Você poderia mudar a cor #440000apenas para o Safari, mas IMHO a melhor solução seria não mudar a aparência do botão em tudo . Dessa forma, em todos os navegadores em todas as plataformas, ele terá a aparência que os usuários esperam.

Answer 14

ATUALIZADO EM 2019:

Combinando as ideias desta página em uma solução "configure e esqueça".

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 */
}

Answer 15

4

Você pode usar o atributo readonly em vez do atributo disabled, mas então você precisará adicionar uma classe porque não há uma entrada de 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>

Esteja ciente de que uma entrada desabilitada e uma entrada somente leitura não são a mesma coisa. Uma entrada somente leitura pode ter foco e enviará valores no envio. Olhe para w3.org

Serxipc
fonte

obrigado cara sim, esta foi minha primeira ideia também, mas não funciona para mim por causa do foco: no iPhone, o teclado aparece quando um usuário toca em um elemento somente leitura, e isso é confuso. Eu encontrei minha solução alternativa e meu questão é bastante "teórica" - por que esse comportamento?

Incidentalmente

Uma alternativa interessante: o problema do foco também apresenta problemas de usabilidade, em particular para pessoas que usam leitores de tela. Na maioria dos casos, você simplesmente não gostaria que os usuários pudessem tabular para campos somente leitura / desabilitados em um formulário.

avernet

Answer 16

obrigado cara sim, esta foi minha primeira ideia também, mas não funciona para mim por causa do foco: no iPhone, o teclado aparece quando um usuário toca em um elemento somente leitura, e isso é confuso. Eu encontrei minha solução alternativa e meu questão é bastante "teórica" - por que esse comportamento?

Incidentalmente

Answer 17

Uma alternativa interessante: o problema do foco também apresenta problemas de usabilidade, em particular para pessoas que usam leitores de tela. Na maioria dos casos, você simplesmente não gostaria que os usuários pudessem tabular para campos somente leitura / desabilitados em um formulário.

avernet

Answer 18

para @ryan

Eu queria que minha caixa de entrada desativada parecesse normal. Esta é a única coisa que funcionaria no Safari Mobile.

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

Answer 19

Se você quiser consertar o problema para todas as entradas desabilitadas, você pode definir -webkit-text-fill-colorpara currentcolor, então a colorpropriedade da entrada será usada.

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

Veja aquele violino no Safari https://jsfiddle.net/u549yk87/3/

Answer 20

2

Esta pergunta é muito antiga, mas pensei em postar uma solução de webkit atualizada. Basta usar o seguinte CSS:

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

conceptDawg
fonte

3

e para Firefox, use input: -moz-placeholder

stephan.com

1

eh .. isso é para o atributo placeholder, eu não acho que isso afeta os campos desabilitados. A resposta de -webkit-text-fill-color

@Kemo

Answer 21

3

e para Firefox, use input: -moz-placeholder

stephan.com

Answer 22

1

eh .. isso é para o atributo placeholder, eu não acho que isso afeta os campos desabilitados. A resposta de -webkit-text-fill-color

@Kemo

Answer 23

0

Você pode usar um botão em vez de uma entrada?

<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

não realmente ... em meu aplicativo real, essas caixas de texto são geralmente habilitadas e usadas para entrada, e apenas sob certas condições elas são desabilitadas com JavaScript, eu posso descobrir uma solução alternativa (como substituir <input /> por um <div> <estilizado / div> em vez de definir 'disabled') - mas realmente parece errado

Incidentemente

Answer 24

não realmente ... em meu aplicativo real, essas caixas de texto são geralmente habilitadas e usadas para entrada, e apenas sob certas condições elas são desabilitadas com JavaScript, eu posso descobrir uma solução alternativa (como substituir <input /> por um <div> <estilizado / div> em vez de definir 'disabled') - mas realmente parece errado

Incidentemente

Cor do texto de entrada desativada

Respostas: