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

В настоящее время я использую readonly = "readonly" для отключения полей. Теперь я пытаюсь создать атрибут с помощью CSS. Я пробовал использовать

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

но он почему-то не работает. Я также пробовал

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

который тоже не работает.

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

4b9b3361

Обратите внимание, что 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] {
...
}
67
ответ дан 06 авг. '12 в 22:13
источник

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

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"] является избыточным. См. qaru.site/info/48762/...

21
ответ дан 28 окт. '13 в 23:13
источник

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

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 и т.д. Каждый из них должен быть добавлен в селектор.

14
ответ дан 11 февр. '15 в 13:49
источник

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

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

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

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

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

2
ответ дан 05 февр. '15 в 13:01
источник
input[readonly], input:read-only {
    /* styling info here */
}

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

1
ответ дан 11 июня '15 в 12:42
источник

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

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }
1
ответ дан 22 апр. '13 в 18:37
источник

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

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

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

1
ответ дан 17 марта '17 в 21:10
источник

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

input[type="text"]:disabled,
select:disabled,
textarea:disabled { color: #000; background-color: #ebebe4; }
-10
ответ дан 01 марта '13 в 0:34
источник