Отключен ввод цвета текста

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

Вопрос

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

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

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

Обновить:
Спасибо вам за ваши ответы.Мне это больше не нужно для моей работы (вместо отключения я заменяю 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>
Это было полезно?

Решение 

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

Другие советы

Браузеры webkit для телефонов и планшетов (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 */

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

К ТВОЕМУ сведению,

opacity: 1!important;

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

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

Вы можете использовать атрибут только для чтения вместо атрибута disabled, но тогда вам нужно будет добавить класс, потому что нет ввода псевдокласса: только для чтения.

<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

для @ryan

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

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

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

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

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

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

Видишь эту скрипку в Safari https://jsfiddle.net/u549yk87/3/

ОБНОВЛЕНО В 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 */
}

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

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top