cor do texto de entrada desativado

StackOverflow https://stackoverflow.com/questions/262158

Pergunta

O HTML simples abaixo mostra de forma diferente no Firefox e navegadores baseados no WebKit (eu verifiquei no Safari, Chrome e iPhone).

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

Can I alguma forma corrigir isso (retirar esta transparência no Safari)?

UPDATE:
Obrigado por suas respostas. Eu não preciso disso para o meu trabalho mais (em vez de desativar estou substituindo elementos input com elementos div estilo), mas eu ainda estou curioso por que isso acontece e se há alguma maneira de controlar este 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>
Foi útil?

Solução 

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

Outras dicas

telefone e tablet webkit navegadores (Safari e Chrome) e área de trabalho ou seja, ter uma série de mudanças padrão para elementos de formulário com deficiência que você vai precisar para substituir se você quiser entradas deficientes estilo. 

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

é uma questão interessante e eu tentei muitas substituições para ver se eu posso ir buscá-la, mas nada está funcionando. Navegadores modernos realmente usar as suas próprias folhas de estilo para contar elementos como exibir, talvez por isso, se você pode farejar estilo do Chrome você pode ver os estilos que está forçando-se a ele. Eu vou estar muito interessado no resultado e se você não tiver um Vou passar um pouco de tempo me olhando para ele mais tarde, quando eu tiver algum tempo para desperdiçar.

FYI, 

opacity: 1!important;

não substituí-lo, então eu não tenho certeza que é opacidade.

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

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

Tenha em atenção que a entrada de pessoas com deficiência e entrada de somente leitura não são os mesmos. A entrada readonly pode ter foco, e irá enviar valores em enviar. Olhe w3.org

de @ Ryan

Eu queria que a minha caixa de entrada de pessoas com deficiência para se parecer com um normal. Esta é a única coisa que funciona no Safari Mobile. 

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

Esta questão é muito antiga, mas eu pensei que eu ia postar uma solução webkit atualizado. Apenas use o seguinte CSS: 

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

Se você quiser resolver o problema para todas as entradas com deficiência, você pode definir -webkit-text-fill-color para currentcolor, portanto, a propriedade color da entrada será usado. 

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

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

ATUALIZADO 2019:

A combinação de ideias a partir desta página em um "conjunto e esquecer" solução. 

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

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top