Как стилизовать атрибут readonly с помощью CSS?

Ответ 1

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

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

Ответ 2

Обратите внимание, что textarea[readonly="readonly"] работает, если вы устанавливаете readonly="readonly" в HTML, но он НЕ работает, если вы устанавливаете readOnly -attribute на true или "readonly" через JavaScript.

Чтобы селектор CSS работал , если вы установили readOnly с помощью JavaScript, вам нужно использовать селектор textarea[readonly].

Такое же поведение в Firefox 14 и Chrome 20.

Чтобы быть в безопасности, я использую оба селектора.

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

Ответ 3

Чтобы быть в безопасности, вы можете использовать оба...

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

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

Если вы используете что-то вроде функции jQuery .prop('readonly', true), вам понадобится [readonly], тогда как если вы используете .attr("readonly", "readonly"), вам понадобится [readonly="readonly"].

Исправление: Вам нужно использовать input[readonly]. Включение input[readonly="readonly"] является избыточным. См. fooobar.com/questions/48762/...

Ответ 4

Загружает ответы здесь, но не видел тот, который я использую:

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

Обратите внимание на тире в псевдоселекторе. Если входной сигнал readonly="false", он поймает это, так как этот селектор поймает наличие readonly независимо от значения. Технически 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 и т.д. Каждый из них должен быть добавлен в селектор.

Ответ 5

Если вы выберите ввод с идентификатором, а затем добавьте тег input[readonly="readonly"] в css, что-то вроде:

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

Это не сработает. Вы должны выбрать родительский класс или идентификатор, а затем вход. Что-то вроде:

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

Мои 2 цента, ожидая новых билетов на работу: D

Ответ 6

Для работы во всех браузерах используйте следующее:

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

Ответ 7

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

Shoud охватывает все случаи для поля ввода только для чтения...

Ответ 8

Есть несколько способов сделать это.

Первое наиболее широко используется.

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], из моего опыта.

Ответ 9

Может быть, вы должны попробовать DISABLE.

input[type="text"]:disabled,
select:disabled,
textarea:disabled { color: #000; background-color: #ebebe4; }