Атрибут readonly в HTML


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

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

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

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

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

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

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

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

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

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

Атрибут 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/questions/48762/.

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

Обратите внимание на тире в псевдоселекторе. Если входной сигнал readonly=»false» , он поймает это, так как этот селектор поймает наличие readonly независимо от значения. Технически false недействителен в соответствии со спецификациями, но Интернет не является идеальным миром. Если вам нужно покрыть этот случай, вы можете сделать это:

textarea работает одинаково:

Имейте в виду, что html теперь поддерживает не только type=»text» , но и множество других текстовых типов, таких как number , tel , email , date , time , url и т.д. Каждый из них должен быть добавлен в селектор.

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

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

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

Атрибут readonly

Атрибут readonly , тега , запрещает изменять текстовое поле формы, только для type= «text» или «password» . Данный атрибут играет роль булевой переменной. Изменить значение readonly можно только динамически, используя скрипты.

Если установлен атрибут readonly , то в текстовое поле формы не может быть вбит новый текст или удален старый. Тем не менее, на таком поле можно сфокусироваться, нажав клавишу быстрого доступа, или перейти с помощью табуляции (клавиша Tab ). А также — данное текущее (неизменяемое) значение элемента является действующим, то есть оно может быть отправлено на сервер и обработано CGI-программой.

Булева переменная — это переменная, которая может иметь всего два значения: true или false (истина или ложь). В нашем случае присутствие readonly является истиной (поле нельзя изменять), а его отсутствие — ложью (изменяемое поле).

Значения

Атрибут сам играет роль значения.

Значение по умолчанию: Если атрибут readonly отсутствует, то текстовое поле формы можно изменять.

HTML Атрибут readonly

Атрибут readonly (от англ. «read only» — «только для чтения») указывает, что поле ввода или текстовое поле предназначено только для чтения.

Когда к элементу добавляется атрибут readonly , поле ввода или текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. Также содержимое поле можно выделить и скопировать в буфер обмена.

Синтаксис

Значения

Данный атрибут является логическим атрибутом. В HTML данный атрибут может указываться либо без значения, либо с пустым значением, либо со значением «readonly».

Значение по умолчанию

По умолчанию этот атрибут выключен.

Применяется к тегам

Примечание: Атрибут readonly может быть использован с полями данных (тег input ) следующих типов (атрибут type ): «date», «datetime», «email», «month», «number», «password», «search», «tel», «text», «time», «url», «week».

HTML readonly attribute

readonly

The purpose of the HTML readonly attribute is to disallow users to enter data in the associated element.

Supported elements

HTML readonly attribute supports input and textarea elements.

Syntax

Where ElementName is any supported element.

Type of value

Value

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML readonly attribute with input and textarea elements

Result

View this example in a separate browser window

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

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

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

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

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


    1 9
  • 12 окт 2020 2020-10-12 07:06:13
  • Daphne

9 ответов

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

  • 12 окт 2020 2020-10-12 07:06:16
  • Sheila Chang

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

  • 12 окт 2020 2020-10-12 07:06:15
  • Serge

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

  • 12 окт 2020 2020-10-12 07:06:15
  • Pal R

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

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

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

Илон Маск рекомендует:  Что такое код getwindowlong

Это не используется много:

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

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

  • 12 окт 2020 2020-10-12 07:06:15
  • Matthew Campbell

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

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

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

  • 12 окт 2020 2020-10-12 07:06:15
  • softwareplay

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

Обратите внимание на тире в псевдоселекторе. Если входной сигнал readonly=»false» , он поймает это, так как этот селектор поймает наличие readonly независимо от значения. Технически false недействителен в соответствии со спецификациями, но Интернет не является идеальным миром. Если вам нужно покрыть этот случай, вы можете сделать это:

textarea работает одинаково:

Имейте в виду, что html теперь поддерживает не только type=»text» , но и множество других текстовых типов, таких как number , tel , email , date , time , url и т.д. Каждый из них должен быть добавлен в селектор.

  • 12 окт 2020 2020-10-12 07:06:14
  • IAmNaN

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

Атрибут 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/questions/48762/.

  • 12 окт 2020 2020-10-12 07:06:14
  • Luke

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


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

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

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

Атрибут HTML5 — read only.

Всем привет. Сегодня мы поговорим о новом атрибуте HTML5read only.

Аттрибут read only служит для того, чтобы отключить поле для записи. Т.е. пользователь не сможет ничего туда ввести, однако мы сможем менять значение поля, используя скрипты. Применяется к элементам формы(input).

В нашем поле введено значение по-умолчанию, оно будет отображаться, но изменить ничего пользователь не сможет.

Данный атрибут очень похож на disabled и в общем-то делает то же самое, однако используя атрибут disabled невозможно получить доступ к полю, используя клавишу TAB, поле становится серым, и применяется он к любым элементам, а атрибут readonly запрещает изменение поля, но к нему можно получить доступ(фокус) через клавишу TAB, и применяется он в основном к текстовым элементам формы.

Итак, на сегодня все. Вы узнали, зачем нужен атрибут readonly. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 3 ):

    Напишите еще про атрибут формы «maxlength», думаю новичкам будет полезно. Кстати, а когда следующая статья про создание движка?

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

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

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

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

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

    Создан 09 мар. 12 2012-03-09 14:03:29 Daphne

    ‘input [readonly]’ должен работать. Удостоверьтесь, что он не переопределяется другими, более конкретными селекторами в другом месте вашей таблицы стилей. – BoltClock 09 мар. 12 2012-03-09 14:04:48

    , если вы хотите отключить, затем используйте отключенный атрибут, а не только readonly – Sven Bieder 09 мар. 12 2012-03-09 14:16:01

    Я заметил, что вы пропустите апостроф во втором селекторе. Должен быть введен [readonly = ‘readonly’], и он будет работать так же, как и вход [только для чтения]. – vlad saling 09 мар. 12 2012-03-09 14:18:08

    @SvenBieder. Вполне возможно, что у всего лишь одного и того же человека. Поле Readonly, отправленное на сервер в форме submit, в то время как отключенные поля — нет. – Naren 09 мар. 12 2012-03-09 14:21:06

    ‘input [readonly = ‘readonly’]’ будет работать, только если вы используете HTML, например ‘ ‘, а не, например. ‘ ‘. ‘input [readonly]’ должен соответствовать обоим. – Mathias Bynens 09 мар. 12 2012-03-09 14:22:11

    только FYI, IE6/7 не поддерживает этот атрибут только для выбора IE8 + – Matt K 09 мар. 12 2012-03-09 14:24:15

    @Matt K: IE7 отлично подходит для селекторов атрибутов для таких вещей, как ‘readonly’. Это происходит только в некоторых случаях (например, при добавлении свойств DOM и HTML-атрибутов). – BoltClock 09 мар. 12 2012-03-09 14:25:37

    Илон Маск рекомендует:  Книги, учебники по JavaScript

    @BoltClock: извините, приложил этот комментарий к неправильной части. Ответ Курта ниже не будет работать в IE6/7. он не распознает ‘input [readonly =» readonly «]’, это должен быть только ‘input [readonly]’. – Matt K 09 мар. 12 2012-03-09 14:35:34

    @SvenBieder Да, я знаю, что он не работает так же, как отключен. Я должен использовать readonly, потому что хочу, чтобы форма отправляла те же значения, но не позволяла пользователям редактировать поле. Я использовал jQuery для предотвращения фокусировки значения readonly, поэтому он как отключенный, но вы можете отправлять значения. – Daphne 09 мар. 12 2012-03-09 14:40:25

    @ vladsaling Извините, это была опечатка. У меня есть апостроф во втором селекторе. Изменили описание вопроса. – Daphne 09 мар. 12 2012-03-09 14:41:07

    @BoltClock Я думаю, что это может быть причиной. Я использую параметр ‘ рядом с классом readonly в попытке определить приоритет класса readonly, но он не работает. Как еще я могу иметь как класс настроек, так и класс readonly, потому что только некоторые поля являются readonly и не могут использовать readonly для всех полей. – Daphne 09 мар. 12 2012-03-09 14:45:20

    ‘! Important’ должен работать, чтобы переопределить, если у вас также нет’! Important’ в классе настроек? – Matt K 09 мар. 12 2012-03-09 14:45:27

    @ Daphne oh, ok then :) какие стили вы пытаетесь применить? не каждый элемент ввода поддерживает каждый атрибут css . – vlad saling 09 мар. 12 2012-03-09 14:46:14

    Не могли бы вы изменить это на свой вопрос, пожалуйста? Я также замечаю, что после вашего селектора блуждающий ‘! Important’ — это ошибка в вашем комментарии? – BoltClock 09 мар. 12 2012-03-09 15:13:15

    Вы можете настроить селектор атрибутов в ie8, если doctype — HTML5. caniuse.com – BenRacicot 17 окт. 14 2014-10-17 17:12:09

    9 ответов

    Создан 09 мар. 12 2012-03-09 14:20:14 Curt

    Вы должны использовать ‘input [readonly]’ вместо того, поскольку ‘readonly’ является логическим атрибутом, который не предназначен для определенного значения. – BoltClock 22 апр. 13 2013-04-22 15:43:58

    @BoltClock Да. См. Резолюцию в ответе ниже. – Pal R 22 апр. 13 2013-04-22 15:53:38

    Как я могу снова записать его? Просто удалить стиль класса? – Renaro Santos 06 янв. 14 2014-01-06 13:00:03

    @RenaroSantos Это изменение HTML. Удалите ‘readonly =» readonly «‘ из вашего элемента ‘input’. – Curt 06 янв. 14 2014-01-06 16:15:33

    w/IE7 вы все еще можете использовать селектор с jQuery – ladieu 30 апр. 14 2014-04-30 17:55:02

    , возможно, чтобы исправить ответ в соответствии с комментарием @ BoltClock (для игроков, которые не посещают ссылку ниже)? – Serge 11 июн. 15 2015-06-11 09:37:55

    @Serge Answer updated – Curt 11 июн. 15 2015-06-11 09:59:16

    не соответствует этому фрагменту, но лучше сейчас;) – Serge 11 июн. 15 2015-06-11 10:01:05

    @Serge Ha true, обновил это тоже. – Curt 11 июн. 15 2015-06-11 10:04:55

    , наконец, ответ идентичен вопросу! ;)Serge 11 июн. 15 2015-06-11 10:06:00


    Я пробовал все возможные решения, и никто из них не работает на iOS :(Я хотел настроить свойство цвета, то есть по умолчанию оттенок светло-серого. Редактирование моего предыдущего комментария, оно действительно работает на iOS, ну, но цвет немного тускнеет, поэтому цвет текста не получает точного цвета, установленного в CSS. – bboydflo 15 авг. 17 2020-08-15 10:04:18

    Обратите внимание, что textarea[readonly=»readonly»] работает, если вы установите readonly=»readonly» в HTML, но он не работает, если вы установите readOnly в true атрибута по или «readonly» с помощью JavaScript.

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

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

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

    Создан 06 авг. 12 2012-08-06 19:13:12 kaka

    Вы можете просто использовать ‘textarea [readonly]’ вместо — каждый ‘textarea [readonly =» readonly » ] ‘гарантированно соответствует этому. – BoltClock 22 апр. 13 2013-04-22 15:43:05

    Возможно, вам стоит попробовать ОТКЛЮЧИТЬСЯ.

    Создан 28 фев. 13 2013-02-28 21:34:53 Sheila Chang

    Элемент может быть только прочитан, но включен. Это исключало бы такой элемент. – BoltClock 22 апр. 13 2013-04-22 15:42:21

    Отключенные элементы не всегда отправляют данные обратно на сервер, элементы readonly делают. – Serj Sagan 24 апр. 13 2013-04-24 15:53:01

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

    Создан 22 апр. 13 2013-04-22 15:37:02 Pal R

    За исключением случаев, когда JavaScript отключен . – Serj Sagan 24 апр. 13 2013-04-24 15:53:37

    98% времени его нет. – Muhammad Umer 07 июл. 13 2013-07-07 02:40:03

    Итак, надеюсь, что ваша целевая аудитория не находится в этом 2%. – Bacco 21 мар. 14 2014-03-21 22:36:40

    Что включает класс «заблокирован»? – AdiT 13 май. 14 2014-05-13 12:59:20

    $ (‘. TextBoxClass’). AddClass (‘locked’) будет включать ‘locked’ – Pal R 14 май. 14 2014-05-14 21:09:05

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

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

    Илон Маск рекомендует:  Inc - Процедура Delphi

    Создан 28 окт. 13 2013-10-28 20:13:46 Luke

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

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

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

    Создан 05 фев. 15 2015-02-05 10:01:29 softwareplay

    «Если вы выберете вход с идентификатором», который OP не является, так как это важно? Даже если это так, вы ошибаетесь, вам просто нужно удалить комбинатор потомков. – Quentin 05 фев. 15 2015-02-05 10:07:40

    AH ok, вы имеете в виду, что мне нужно набрать что-то вроде ввода [readonly = «readonly»] # inputID?/me fool .. вы правы – softwareplay 05 фев. 15 2015-02-05 14:33:33

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

    Примечание к тире в псевдоселекторе. Если входной сигнал readonly=»false» , он тоже поймает его, поскольку этот селектор улавливает наличие readonly независимо от значения. Технически false недействителен в соответствии со спецификациями, но Интернет не идеальный мир. Если вам нужно, чтобы покрыть этот случай, вы можете сделать это:

    textarea работает точно так же:

    Имейте в виду, что HTML теперь поддерживает не только type=»text» , но множество других текстовых типы, такие как number , tel , email , date , time , url и т. д. Каждый должен быть добавлен в селектор.

    Создан 11 фев. 15 2015-02-11 10:49:06 IAmNaN

    Изменение свойства readonly

    Здравствуйте.
    У меня есть форма и поле textarea с установленным readonly
    Мне нужно, чтобы при нажатии на кнопку форма становилась редактируемой.
    Делаю вот так:

    Javascript
    Javascript
    15.07.2013, 13:56

    Изменение свойства при изменении другого свойства
    Предположим у меня есть товар,у которого есть несколько размеров и к каждому размеру привязана.

    Изменение свойства по id
    Приветствую, у меня вопрос возник, хочу ширину изменять от 0 до 300 у дива, но она не изменяется.

    Плавное изменение свойства к аргументу
    Добрый день. Я с++ изучал и в яваскрипте мне очень не хватает чего-то типа Sleep. Помогите написать.

    Изменение свойства CSS на JavaScript
    Приветствую вас, форумчане! Помогите пожалуйста, как можно реализовать подобное?: Есть регулятор.

    Изменение CSS свойства fill при нажатии
    Подскажите пожалуйста хотя бы саму логику, как это реализовать: Есть карта с регионами, при.

    Форум

    Справочник

    Поиск по форуму
    Расширенный поиск
    К странице.
    Страница 1 из 4 1 2 3 > Последняя »

    Эээ, а как же все таки изменить атрибут readonly (ну или на крайняк disabled)? Делаю ячейку таблицы с изменяющимся режимом доступа: доступен для редакт-я/не доступен. (по двойному клику на самой ячейке).

    ИНТУИТ пишет, что «readonly [CI]

    Если установлен, этот булев атрибут запрещает изменение ЭУ.

    Атрибут readonly определяет, может ли ЭУ быть модифицирован пользователем.

    Если установлен, атрибут readonly действует на элемент следующим образом:

    ЭУ «только для чтения» может получить фокус, но не может быть модифицирован пользователем.
    ЭУ «только для чтения» включён в навигацию табуляцией.
    ЭУ «только для чтения» может быть «действующим».
    Следующие ЭУ поддерживают атрибут readonly: INPUT и TEXTAREA.

    То, как ЭУ «только для чтения» отображаются, зависит от ПА.

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

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

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

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

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

    9 ответов

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

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

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

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

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

    Атрибут 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

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

    Обратите внимание на черту в псевдо-селекторе. Если ввод readonly=»false» он также поймает это, так как этот селектор ловит присутствие readonly независимо от значения. Технически false недопустимо в соответствии со спецификациями, но Интернет не идеальный мир. Если вам нужно покрыть этот случай, вы можете сделать это:

    textarea работает так же:

    Имейте в виду, что теперь html поддерживает не только type=»text» , но и множество других текстовых типов, таких как number , tel , email , date , time , url и т. Д. Каждый из них необходимо добавить в селектор.

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

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

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

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

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

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL