Псевдоклассы форм

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

Ряд псевдоклассов используется для работы с элементами форм:

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

  • :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)

  • :default: выбирает элементы по умолчанию

  • :valid: выбирает элемент, если его значение проходит валидацию HTML5

  • :invalid: выбирает элемент, если его значение не проходит валидацию

  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

  • :required: выбирает элемент, если у него установлен атрибут required

  • :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :enabled {
				border: 2px black solid;
				color: red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" value="Enabled" /></p>
        <p><input type="text" disabled value="Disabled" /></p>
    </body>
</html>
Псевдокласс enabled и disabled в CSS 3

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

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :checked + span {
				color: red;
				font-weight: bold; 	/* выделение жирным */
			}
        </style>
    </head>
    <body>
			<h2>Выберите технологию</h2>
			<p>
                <input type="checkbox" checked name="html5"/><span>HTML5</span>
            </p>
            <p>
                <input type="checkbox" name="dotnet"/><span>.NET</span>
            </p>
            <p>
                <input type="checkbox" name="java"/><span>Java</span>
            </p>
			
			<h2>Укажите пол</h2>
			<p>
                <input type="radio" value="man" checked name="gender"/><span>мужской</span>
            </p>
            <p>
                <input type="radio" value="woman" name="gender"/><span>женский</span>
            </p>
    </body>
</html>

Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.

Псевдокласс checked в CSS 3

Псевдокласс default

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :default {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <input name="login"/>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>
Псевдокласс default в CSS 3

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            input:invalid {
				border: 2px solid red;
			}
			input:valid {
				border: 2px solid green;
			}
        </style>
    </head>
    <body>
		<form>
            <p><input type="text" name="login" placeholder="Введите логин" required /></p>
            <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>
Псевдоклассы valid и invalid в CSS 3

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в определенный диапазон. Это в первую очередь относится к элементу <input type="number" >.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :in-range {
				border: 2px solid green;
			}
			:out-of-range {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <p>
				<label for="age">Ваш возраст:</label> 
				<input type="number" min="1" max="100" value="10" id="age" name="age"/>
			</p>
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:

Псевдоклассы in-range и out-of-range в CSS 3

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :optional {
				border: 2px solid blue;
			}
			:required {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
			<p>
				<label for="login">Логин:</label> 
				<input type="text" id="login" name="login" required />
			</p>
			<p>
				<label for="password">Пароль:</label> 
				<input type="password" id="password" name="password" required />
			</p>
            <p>
				<label for="name">Имя:</label> 
				<input type="text" id="name" name="name"/>
			</p>
            <input type="submit" value="Регистрация" />
        </form>
    </body>
</html>
Псевдоклассы required и optional в CSS 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850