Отключен цвет ввода текста
Приведенный ниже простой 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>
Ответы 10
Можете ли вы использовать кнопку вместо ввода?
<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') - но это действительно неправильно
это интересный вопрос, и я перепробовал множество переопределений, чтобы посмотреть, смогу ли я его запустить, но ничего не работает. Современные браузеры на самом деле используют свои собственные таблицы стилей, чтобы сообщать элементам, как отображать, так что, возможно, если вы сможете понюхать таблицу стилей Chrome, вы сможете увидеть, какие стили они навязывают ей. Меня очень заинтересует результат, и если у вас его нет, я потрачу немного времени на его поиски позже, когда у меня будет время, чтобы его терять.
К вашему сведению,
opacity: 1!important;
не отменяет его, поэтому я не уверен, что это непрозрачность.
Благодарность! Я не смог найти объяснения (ничего подобного в таблице стилей пользовательского агента Chrome - только «background-color: rgb (235, 235, 228)» для отключенных входов), и я использую обходной путь, но мне все еще интересно, что происходит на ...
Стив, спасибо за усилия, но я предлагаю в будущем публиковать это как комментарий, а не как ответ.
Вы можете изменить цвет на #440000 только для Safari, но, IMHO, лучшим решением будет не к изменить внешний вид кнопки совсем. Таким образом, в каждом браузере на любой платформе он будет выглядеть так, как этого ожидают пользователи.
Вы можете использовать атрибут readonly вместо атрибута disabled, но тогда вам нужно будет добавить класс, потому что нет псевдокласса input: 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
спасибо человек да, это была моя первая идея, но она не работает для меня из-за фокуса: на iPhone клавиатура выскакивает, когда пользователь нажимает элемент, доступный только для чтения, и это сбивает с толку, я нашел свой обходной путь, и мой вопрос скорее «теоретический» - почему такое поведение?
Интересный обходной путь: проблема фокусировки также создает проблемы с удобством использования, особенно для людей, использующих программы чтения с экрана. В большинстве случаев вы просто не хотите, чтобы пользователи могли переходить на табуляцию в поля формы, доступные только для чтения / отключенные.
Этот вопрос очень старый, но я подумал, что опубликую обновленное решение webkit. Просто используйте следующий CSS:
input::-webkit-input-placeholder {
color: #880000;
}
а для Firefox используйте input: -moz-placeholder
эх .. это для атрибута заполнителя, я не думаю, что это влияет на отключенные поля. Ответ @ Kemo ниже (-webkit-text-fill-color) работает, хотя
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Я хотел, чтобы мое отключенное поле ввода выглядело как обычное. Это единственное, что работает в Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); - цвет заливки текста: rgba (0, 0, 0, 1); -webkit-opacity: 1; фон: белый;
@Ryan прав - непрозрачность должна быть установлена на 1 для Mobile Safari.
Это также необходимо в стандартном браузере Android.
opacity:1 тоже нужен.
Непрозрачность не требуется в текущих сборках Safari, начиная с лета 2016 года.
@AndyMercer - да, если вам не нужна блеклая версия цвета. особенно важно, если вам тоже нужен белый фон
Спас мой день! Тем не менее, это также влияет на окраску цвета текста placeholder элемента input. Если вам тоже понадобится исправить это, посмотрите эту ссылку: css-tricks.com/almanac/selectors/p/placeholder
@Lentyai спасатель жизни! упомянуть, что мы должны использовать: placeholder-shown, чтобы помочь
Браузеры 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 */
для @ryan
Я хотел, чтобы мое отключенное поле ввода выглядело как обычное. Это единственное, что работает в Safari Mobile.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
Если вы хотите решить проблему для всех отключенных входов, вы можете определить -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 */
}
Я также заметил это, для меня это ошибка, поскольку, когда вы вводите background-color: white ввода, он снова будет правильно отображать цвет. Также непрозрачность мало влияет. Хотя -webkit-text-fill-color: # 880000 будет работать