Як стиль атрибуції readonly за допомогою CSS?

Наразі я використовую readonly = "readonly" для відключення полів. Зараз я намагаюся стилізувати атрибут за допомогою CSS. Я спробував використовувати

input[readonly] {
/*styling info here*/
}

але це чомусь не працює. Я також пробував

input[readonly='readonly'] {
/*styling info here*/
}

це теж не працює.

Як я можу стилізувати атрибут readonly за допомогою CSS?

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

Зауважте, що це textarea[readonly="readonly"]працює, якщо ви встановили readonly="readonly"в HTML, але він НЕ працює, якщо ви встановите readOnly-attribute на trueабо "readonly"через JavaScript.

Щоб селектор CSS працював, якщо ви встановлюєте readOnlyJavaScript, ви повинні використовувати селектор textarea[readonly].

Однакова поведінка у Firefox 14 та Chrome 20.

Щоб бути на безпечній стороні, я використовую обидва селектори.

textarea[readonly="readonly"], textarea[readonly] {
...
}

Для безпеки ви можете скористатися обома ...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

Атрибут readonly - це "булевий атрибут", який може бути або пустим, або "лише для читання" (єдині допустимі значення). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Якщо ви використовуєте щось на зразок .prop('readonly', true)функції jQuery , вам знадобиться [readonly], тоді як якщо ви використовуєте, .attr("readonly", "readonly")то вам знадобиться [readonly="readonly"].

Виправлення: використовувати потрібно лише input[readonly]. У тому числі input[readonly="readonly"]зайве. Дивіться https://stackoverflow.com/a/19645203/1766230

Тут є відповіді, але я не бачив жодної, яку я використовую:

input[type="text"]:read-only { color: blue; }

Зверніть увагу на тире в селекторі псевдо. Якщо вхід є, readonly="false"то це також буде зараховано, оскільки цей селектор виявляє наявність лише для читання незалежно від значення. Технічно falseнедійсно відповідно до специфікацій, але Інтернет не є ідеальним світом. Якщо вам потрібно висвітлити цю справу, ви можете зробити це:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea працює так само:

textarea:read-only:not([read-only="false"]) { color: blue; }

Майте на увазі , що HTML тепер підтримує не тільки type="text", а й безліч інших типів текстових такий number, tel, email, date, time, urlі т.д. Кожен повинен був би додати до селектора.

Є кілька способів зробити це.

Перший є найбільш широко використовуваним. Він працює у всіх основних браузерах.

input[readonly] {
 background-color: #dddddd;
}

У той час, як наведений вище буде вибирати всі входи із readonlyдоданими, цей нижче буде вибирати лише те, що ви бажаєте. Переконайтеся, що замініть demoпотрібний тип введення.

input[type="demo"]:read-only {
 background-color: #dddddd;
}

Це альтернатива першому, але вона використовується не багато:

input:read-only {
 background-color: #dddddd;
}

:read-onlyСелектор підтримується в Chrome, Opera і Safari. Firefox використовує :-moz-read-only. IE не підтримує :read-onlyселектор.

Ви також можете скористатися input[readonly="readonly"], але це приблизно так само input[readonly], як і з мого досвіду.

input[readonly], input:read-only {
    /* styling info here */
}

Потрібно охопити всі випадки для поля, введеного лише для читання ...

з великої літери використовуйте лише букву Тільки

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

Якщо ви вибрали вхід за допомогою id, а потім додасте input[readonly="readonly"]тег у css, щось на зразок:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

Це не вийде. Ви повинні вибрати батьківський клас або id an, а потім вхід. Щось на зразок:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

Мої 2 копійки під час очікування нових квитків на роботі: D

Використовуйте наступне для роботи в усіх браузерах:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }