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

Question

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

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

, но по какой-то причине он не работает.Я также попробовал

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

В целях безопасности вы можете использовать оба ...

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

Атрибут только для чтения - это «логический атрибут», который может быть либо пустым, либо «только для чтения» (единственные допустимые значения).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

Answer 4

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

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

Answer 5

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

Первый - наиболее широко используемый.Он работает во всех основных браузерах.

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

В то время как предыдущий выберет все входы с присоединенным readonly, этот ниже выберет только то, что вы хотите.Обязательно замените demo на любой тип ввода, который вы хотите.

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

Это альтернатива первому, но он не используется полностью:

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

The *Селектор 1014 * поддерживается в Chrome, Opera и Safari.Firefox использует :-moz-read-only.IE не поддерживает селектор :read-only.

Вы также можете использовать input[readonly="readonly"], но по моему опыту это почти то же самое, что input[readonly].

Answer 6

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

Шоуд крышка все случаи для поля ввода только для чтения ...

Answer 7

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

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

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

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

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

Answer 8

заглавная буква только

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

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

Answer 9

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

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