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

Question 1

Приведенный ниже простой 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>

Question 2

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

Question 3

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

Question 4

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

FYI,

opacity: 1!important;

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

Question 5

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

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

Question 7

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

Question 8

для @ryan

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

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

Question 9

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

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

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

Question 10

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

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

Question 11

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

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

Answer 1

Приведенный ниже простой 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>

Answer 2

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

Мигель

Answer 3

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

Answer 4

51

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

Райан

Answer 5

11

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

Дэвид Джонс

Answer 6

7

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

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

Answer 7

3

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

Энди Мерсер,

Answer 8

2

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

Lentyai

Answer 9

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

Answer 10

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

FYI,

opacity: 1!important;

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

Answer 11

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

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

Answer 12

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

avernet

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

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

Answer 17

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

avernet

Answer 18

для @ryan

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

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

Answer 19

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

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

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

Answer 20

2

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

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

conceptDawg
источник

3

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

stephan.com

1

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

philfreo

Answer 21

3

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

stephan.com

Answer 22

1

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

philfreo

Answer 23

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') - но это действительно неправильно

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

Answer 24

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

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

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

Ответы: