Цвет текста с отключенным входом

Простой HTML ниже выглядит по-разному в браузерах Firefox и WebKit (я проверял в Safari, Chrome и iPhone).

В Firefox обе границы и текст имеют один и тот же цвет (#880000), но в Safari текст становится немного легче (как если бы к нему была применена прозрачность).

Можно ли как-то исправить это (удалить эту прозрачность в Safari)?

UPDATE:
Спасибо за ответ. Мне больше не нужно это для моей работы (вместо отключения я заменяю элементы input стилизованными div элементами), но мне все еще интересно, почему это происходит и есть ли способ контролировать это поведение...

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

Ответ 1

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

Ответ 2

Браузеры веб-браузера Phone и Tablet (Safari и Chrome) и IE рабочего стола имеют ряд изменений по умолчанию для отключенных элементов формы, которые вам необходимо переопределить, если вы хотите стилизовать отключенные входы.

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

Ответ 3

Это интересный вопрос, и я пробовал много переопределений, чтобы посмотреть, смогу ли я это сделать, но ничего не работает. Современные браузеры фактически используют свои собственные таблицы стилей, чтобы рассказывать элементам о том, как отображать, поэтому, возможно, если вы сможете обнюхать таблицу стилей Chrome, вы можете увидеть, какие стили они на нее навязывают. Я буду очень заинтересован в результате, и если у вас его нет, я потрачу немного времени на его поиск позже, когда у меня будет время потратить время.

FYI,

opacity: 1!important;

не переопределяет его, поэтому я не уверен, что это непрозрачность.

Ответ 4

Вы можете изменить цвет на #440000 только для Safari, но IMHO лучшим решением будет не изменять внешний вид кнопки вообще. Таким образом, в каждом браузере на каждой платформе он будет выглядеть так же, как пользователи ожидают его.

Ответ 5

Вы можете использовать атрибут readonly вместо атрибута disabled, но тогда вам нужно будет добавить класс, потому что нет ввода псевдокласса: 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>

Остерегайтесь того, что отключенный ввод и ввод только для ввода не совпадают. Вход для чтения может иметь фокус и будет отправлять значения для отправки. Посмотрите w3.org

Ответ 6

для @ryan

Я хотел, чтобы ящик с отключенным входом выглядел как обычный. Это единственное, что будет работать в Safari Mobile.

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

Ответ 7

Этот вопрос очень старый, но я подумал, что опубликую обновленное решение для веб-кайт. Просто используйте следующий CSS:

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

Ответ 8

ОБНОВЛЕНО 2019:

Объединение идей с этой страницы в решение "поставь и забудь".

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

Ответ 9

Можете ли вы использовать кнопку вместо ввода?

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

Ответ 10

Если вы хотите исправить проблему для всех отключенных входных данных, вы можете определить -webkit-text-fill-color для currentcolor, поэтому будет использоваться свойство color входных данных.

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

Посмотрите эту скрипку в Safari https://jsfiddle.net/u549yk87/3/