Cor do texto de entrada desativada

93

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>

— Incidentalmente
fonte

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

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

43

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

— lijinma
fonte

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

6

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.

— Kornel
fonte

5

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

— paulcol.
fonte

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

4

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;

— vanduc1102
fonte

3

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/

— Freez
fonte

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

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>

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