Отключен ввод текста - PullRequest
Новая
       12

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

74 голосов
/ 04 ноября 2008

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

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

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

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

Ответы [ 10 ]

177 голосов
/ 10 января 2011 
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
42 голосов
/ 07 мая 2014

Браузеры веб-приложений для телефонов и планшетов (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 голосов
/ 05 ноября 2008

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

6 голосов
/ 05 ноября 2008

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

FYI, 

opacity: 1!important;

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

4 голосов
/ 20 июля 2017

для @ Райана

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

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
4 голосов
/ 05 ноября 2008

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

2 голосов
/ 01 июня 2010

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

input::-webkit-input-placeholder {
  color: #880000;
}
1 голос
/ 27 апреля 2019

ОБНОВЛЕНО 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 */
}
0 голосов
/ 20 марта 2019

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

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

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

0 голосов
/ 04 ноября 2008

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

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