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

Простой 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>

источник

2008-11-04 Incidently

@ Ниже приведен правильный ответ Kemo - вы должны подтвердить и принять его. – philfreo

132

-webkit-text-fill-color:#880000

источник

2011-01-10 15:21:54 Kemo

только это решение работает для меня.! воздержитесь.! спасибо – kajo

+43

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

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

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

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

источник

2008-11-04 16:56:21

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

вместо настройки ' отключен ») - но он действительно чувствует себя не так – Incidently

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

FYI,

opacity: 1!important;

не отменяет его, так что я не уверен, что это помутнение.

источник

2008-11-04 23:22:57

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

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

спасибо! это – Jonathan

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

источник

2008-11-05 00:00:23 Kornel

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

источник

2008-11-05 16:27:44 Serxipc

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

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

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

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

источник

2010-06-01 16:09:23 conceptDawg

и для Firefox, используйте ввод: -moz-placeholder –

eh .. это для атрибута placeholder, я не думаю, что это влияет на отключенные поля. @ Ответ Kemo ниже ('-webkit-text-fill-color') работает, хотя – philfreo

телефон и планшетный 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 */

источник

2014-05-07 07:20:59 lijinma

для @ryan

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

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

источник

2017-07-20 08:31:31 vanduc1102

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

ответ

Смежные вопросы