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


150

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

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

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

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

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

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


12
input[readonly]должно сработать. Убедитесь, что он не переопределяется другими, более конкретными селекторами в других местах вашей таблицы стилей.
BoltClock

1
если вы хотите отключить, то используйте атрибут disabled и не только для чтения
Sven Bieder

3
@SvenBieder Только для чтения и отключены имеют разное поведение. Поля только для чтения, отправленные на сервер при отправке формы, а отключенные поля - нет.
Naren

3
input[readonly='readonly']будет работать только если вы используете HTML, как <input readonly="readonly">, например , не для <input readonly>. input[readonly]должно соответствовать обоим.
Матиас Биненс

1
!importantдолжно работать, чтобы переопределить, если у вас также есть !importantв настройках класса?
Мэтт К

Ответы:


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

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


24
input[readonly]Вместо этого вы должны использовать readonlyлогический атрибут as, который не имеет определенного значения.
BoltClock

1
@BoltClock Да. Пожалуйста, смотрите разрешение в ответе ниже.
Pal R

Как я могу сделать это снова доступным для записи? Просто удаляешь стиль класса?
Renaro Santos

@RenaroSantos Это изменение HTML. Удалить readonly="readonly"из вашего inputэлемента.
Курт

с IE7 вы все еще можете использовать селектор с jQuery
ladieu

69

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

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

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

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

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

18
Вы также можете просто использовать textarea[readonly]вместо этого - каждый textarea[readonly="readonly"]гарантированно соответствует этому.
BoltClock

23

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

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


20

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

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


2
Я тоже. LOL Да, вы правы! На данный момент. :read-onlyи другие селекторы псевдо были добавлены в стандарт W3C и могут использоваться с предварительными сборками IE 10 версии 10547 и выше.
IAmNaN

6

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

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

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


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

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


input: только для чтения - это «псевдокласс класса изменчивости, целью которого является облегчение стилизации форм на основе отключенных, доступных только для чтения и contenteditable атрибутов HTML». Как уже упоминалось здесь, css-tricks.com/almanac/selectors/r/read-write-read , различные реализации довольно шаткие.
peater

Это странно, но только вход [только для чтения] работал для меня в FF 58
Pavel_K

3

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

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


2

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

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

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

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

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


«Если вы выбираете вход по идентификатору» - какой ОП не является, так как это относится? Даже если бы это было так, вы ошибаетесь, вам просто нужно удалить комбинатор-потомок.
Квентин

Хорошо, вы имеете в виду, что я должен напечатать что-то вроде input [readonly = "readonly»] # inputID? / я дурак .. вы правы
softwareplay

1

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

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

2
Итак, надеюсь, что ваша целевая аудитория не в этих 2%.
Бакко

Что включает в себя класс «заблокирован» ??
AdiT

$ ('. textBoxClass'). addClass ('заблокирован') будет включать 'заблокирован'
Pal R
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.