Псевдокласс disabled – Почему CSS-файл с атрибутом disabled загружается дважды? — Хабр Q&A

Псевдокласс :disabled | CSS справочник

CSS селекторы

Значение и применение

CSS псевдокласс :disabled в основном используется с элементами формы и выбирает каждый элемент, который отключен (у которых установлен логический атрибут disabled).

Обращаю Ваше внимание, что селектор disabled применяется только к следующим элементам:

  • <button> (кнопка).
  • <input> (пользовательское поле для ввода информации).
  • <optgroup> (группировка связанных данных в раскрывающемся списке).
  • <option> (пункт списка).
  • <select> (раскрывающийся (выпадающий) список).
  • <textarea> (область многострочного ввода).
  • <menuitem> (определяет элемент меню).
  • <fieldset> (служит для визуальной группировки элементов).

Поддержка браузерами

CSS синтаксис:

:disabled {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование псевдокласса :disabled.</title>
<style type = "text/css"> 
input:enabled { /* выбираем каждый элемент, который не отключен */
background-color: AliceBlue; 
}
option:disabled
{ /* выбираем каждый элемент, который отключен */ background-color: gray; } </style> </head> <body> <form> Имя: <input type = "text" value = "Boris"><br><br> Фамилия: <input type = "text" value = "Britva"><br><br> Страна: <input type = "text" disabled = "disabled" value = ""><br><br> Город: <input type = "text" disabled = "disabled" value = ""> </form>< </body> </html>

Результат нашего примера:

Пример использования псевдокласса :disabled.CSS селекторы

seodon.ru | CSS справочник - :disabled

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

Псевдокласс CSS :disabled используется для применения стилей (CSS) к заблокированным (деактивированным) элементам пользовательского интерфейса страницы: кнопок, текстовых полей. В основном такие элементы указываются внутри форм (тег <FORM>).

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: к элементам <BUTTON>, <INPUT>, <OPTGROUP>, <OPTION>, <SELECT>, <TEXTAREA>, у которых установлен атрибут disabled.

Значения

Нет.

Синтаксис

селектор:disabled {  }

Пример CSS: использование :disabled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :disabled</title>
  <style type="text/css">
   textarea:disabled { /* стили фона для неактивного текстового поля */
    background: #cccccc url('images/zapret.gif') no-repeat center; 
   }
  </style>
 </head>
 <body>
  <form action="#">
   <div><textarea disabled cols="30" rows="3"></textarea></div>
   <div><button disabled>Отправить</button></div>
  </form>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS disabled.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа

Псевдокласс :disabled

Псевдокласс :disabled задает стиль для неактивных элементов управления.

Допустимые значения

Применимо к элементам управления у которых есть атрибут disabled: button>, input>, optgroup>, option>, select>,textarea>
Соответсвие версиям CSS CSS 3
Поддерживается браузерами
  • Firefox 2 и выше
  • Opera 9 и выше
  • Safari 1 и выше

Пример

:disabled{
border-style: dashed

}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- label{ float: left; width: 60px } div{ margin-bottom: 5px; } input{ border: 1px solid #7f9db9 } :disabled{ border-style: dashed } --> </style> </head> <body> <form action="#"> <div>Неактивному полю для ввода пароля применим нестандартную пунктирную рамку!</div> <div> <label for="inpLogin">Логин</label> <input type="text" /> </div> <div> <label for="inpPass">Пароль</label> <input type="password" disabled="disabled"/> </div> <div> <input type="submit" value="вход"/> </div> </form> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Псевдокласс :enabled Псевдокласс :checked

Псевдокласс :enabled | CSS справочник

CSS селекторы

Значение и применение

CSS псевдокласс :enabled в основном используется с элементами формы и выбирает каждый элемент, который не отключен (у которых не установлен логический атрибут disabled).

Обращаю Ваше внимание, что селектор enabled применяется только к следующим элементам:

  • <button> (кнопка).
  • <input> (пользовательское поле для ввода информации).
  • <optgroup> (группировка связанных данных в раскрывающемся списке).
  • <option> (пункт списка).
  • <select> (раскрывающийся (выпадающий) список).
  • <textarea> (область многострочного ввода).
  • <menuitem> (определяет элемент меню).
  • <fieldset> (служит для визуальной группировки элементов).

Поддержка браузерами

CSS синтаксис:

:enabled {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование псевдокласса :enabled.</title>
<style type = "text/css"> 
input:enabled
{ /* выбираем каждый элемент, который не отключен */ background-color: AliceBlue; } option:disabled { /* выбираем каждый элемент, который отключен */ background-color: gray; } </style> </head> <body> <form> Имя: <input type = "text" value = "Boris"><br><br> Фамилия: <input type = "text" value = "Britva"><br><br> Страна: <input type = "text" disabled = "disabled" value = ""><br><br> Город: <input type = "text" disabled = "disabled" value = ""> </form>< </body> </html>

Результат нашего примера:

Пример использования псевдокласса :enabled.CSS селекторы

Псевдокласс :disabled

Последнее обновление: 22.11.2010

Псевдокласс :disabled задает стиль для неактивных элементов управления.

Допустимые значения

Применимо к элементам управления у которых есть атрибут disabled: button>, input>, optgroup>, option>, select>,textarea>
Соответсвие версиям CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 2 и выше
  • Opera 9 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

:disabled{
border-style: dashed
}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- label{ float: left; width: 60px } div{ margin-bottom: 5px; } input{ border: 1px solid #7f9db9 } :disabled{ border-style: dashed } --> </style> </head> <body> <form action="#"> <div>Неактивному полю для ввода пароля применим нестандартную пунктирную рамку!</div> <div> <label for="inpLogin">Логин</label> <input type="text" /> </div> <div> <label for="inpPass">Пароль</label> <input type="password" disabled="disabled"/> </div> <div> <input type="submit" value="вход"/> </div> </form> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

По теме:

CSS от А до Я: как использовать псевдокласс enabled

CSS от А до Я: как использовать псевдокласс enabled

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом :enabled.

E значит :enabled

В CSS есть множество псевдоклассов, которые помогают стилизовать разные состояния элементов, а также получить доступ к определенным элементам в зависимости от их отношения или позиции к другим элементам. Псевдоклассы :enabled и :disabled открывают и закрывают элементы для заполнения или выбора.

С помощью псевдокласса :enabled можно стилизовать активные состояния элементов форм, таких как button, input, optgroup, option, select и textarea. Если у элемента есть состояние :enabled, то у него есть и состояние :disabled.

Эти состояния задаются при помощи атрибута disabled с булевым значением. Стоит отметить, что атрибута enabled нет, а псевдокласс :enabled есть.

CSS от А до Я: как использовать псевдокласс enabled

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<input type="text"/> <input type="text" disabled/>

<input type="text"/>

<input type="text" disabled/>

То есть элементы можно стилизовать как по их псевдоклассам при помощи селектора атрибута, так и по отрицанию этого селектора:

input:enabled { } input:not([disabled]) { } input:disabled { } input[disabled] { }

input:enabled { }

input:not([disabled]) { }

input:disabled { }

input[disabled] { }

Разницы нет никакой: все методы поддерживаются в IE9+, специфичность селекторов также одинаковая. Не знаю, как часто вы будете использовать эти селекторы, но мне интересно узнать про все варианты решения одной и той же задачи.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

CSS от А до Я: как использовать псевдокласс enabled

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Псевдокласс :enabled | CSS | WebReference

Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

Синтаксис ?

Селектор:enabled { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>enabled</title>
  <script>
   function agreeForm(f) {
    if (f.agree.checked) f.submit.disabled = 0;
    else f.submit.disabled = 1;
   }
  </script>
  <style>
   input:enabled { background: red; }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p>Типовой договор</p>
   <p><input type="checkbox" name="agree"> 
   Я согласен со всеми условиями</p>
   <p><input type="submit" name="submit" value="Отправить" disabled></p>
  </form>
 </body>
</html>

В данном примере при включении галочки добавляется стиль к кнопке. Результат примера показан на рис. 1.

Результат использования псевдокласса :enabled

Рис. 1. Результат использования псевдокласса :enabled

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *