it-swarm.com.ru

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

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

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

но это не работает по какой-то причине. Я также пытался

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

это тоже не работает.

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

143
Daphne
198
Curt

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

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

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

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

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

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

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/17662

22
Luke

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

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

20
IAmNaN

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

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

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], по моему опыту.

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

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

4
Serge

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

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

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

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

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

2
softwareplay

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

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

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

input[readOnly] {
      background: red !important;
    }
<input type="text" name="country" value="China" readonly="readonly" />
1
王小陌