Как стилизовать атрибут 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 */
}

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

использовать только первую букву

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

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

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

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

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

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

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

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

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