Вимкнено введення тексту тексту

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 має рацію - 1для Mobile Safari потрібно встановити непрозорість .

— Девід Джонс,

7

opacity:1також необхідно.

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

3

Непрозорість не потрібна в поточних версіях Safari, станом на літо 2016 року.

— Енді Мерсер

2

Врятував мій день! Проте це також впливає на забарвлення placeholderтексту тексту inputелемента. Якщо вам також знадобиться виправлення, перегляньте це посилання: css-tricks.com/almanac/selectors/p/placeholder

— Лентяй

43

Веб-набори для телефонів і планшетів (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 */

— lijinma
джерело

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

Це питання дуже давнє, але я думав, що опублікую оновлене рішення веб-набору. Просто використовуйте наступний CSS:

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

— conceptDawg
джерело

3

а для Firefox використовуйте введення: -moz-placeholder

— stephan.com

1

е .. це для атрибута placeholder, я не думаю, що це впливає на вимкнені поля. Відповідь @ 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> замість того, щоб встановити "вимкнено") - але це дійсно не так

— випадково