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

95

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

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

Можно как-то это исправить (убрать прозрачность в 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>

— Кстати
источник

Я также заметил это, для меня это ошибка, поскольку, когда вы помещаете background-color: white ввода, он снова будет правильно отображать цвет. Также непрозрачность мало влияет. Хотя -webkit-text-fill-color: # 880000 будет работать

— Мигель

239

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

— Кемо
источник

51

Я хотел, чтобы мое отключенное поле ввода выглядело как обычное. Это единственное, что работает в Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-opacity: 1; фон: белый;

— Райан

11

@Ryan прав - непрозрачность должна быть установлена в 1Mobile Safari.

— Дэвид Джонс

7

opacity:1тоже необходимо.

— Марсель Фальер

3

По состоянию на лето 2016 года непрозрачность не требуется в текущих сборках Safari.

— Энди Мерсер,

2

Спас мой день! Но это также влияет на раскраску placeholderцвета текста inputэлемента. Если вам тоже понадобится исправление, посмотрите эту ссылку: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Браузеры 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 */

— лиджинма
источник

6

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

FYI,

opacity: 1!important;

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

— Стив Перкс
источник

Благодарность! Я не смог найти объяснения (ничего подобного в таблице стилей пользовательского агента Chrome - только "background-color: rgb (235, 235, 228)" для отключенных входов), и я использую обходной путь, но все еще любопытно, что происходит на ...

— Между прочим,

Стив, спасибо за ваши усилия, но я предлагаю в будущем публиковать это как комментарий, а не как ответ.

— avernet

6

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

— Корнель
источник

6

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

— Полкол.
источник

4

Вы можете использовать атрибут 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

— Serxipc
источник

спасибо человек да, это была моя первая идея, но она не работает для меня из-за фокуса: на iPhone клавиатура выскакивает, когда пользователь нажимает на элемент, доступный только для чтения, и это сбивает с толку, я нашел обходной путь, и мой вопрос скорее «теоретический» - почему такое поведение?

— Между прочим,

Интересный обходной путь: проблема фокусировки также создает проблемы с удобством использования, особенно для людей, использующих программы чтения с экрана. В большинстве случаев вы просто не хотите, чтобы пользователи могли переходить на табуляцию в поля формы, доступные только для чтения / отключенные.

— avernet

4

для @ryan

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

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

— vanduc1102
источник

3

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

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

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

— Freez
источник

2

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

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

— conceptDawg
источник

3

а для Firefox используйте input: -moz-placeholder

— stephan.com

1

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

— philfreo

0

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

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

не совсем ... в моем реальном приложении эти текстовые поля обычно включены и используются для ввода, и только при определенных условиях они отключаются с помощью JavaScript, я могу найти обходной путь (например, заменить <input /> на стилизованный <div> < / div> вместо установки 'disabled') - но это действительно неправильно

— Между прочим,