Уникальное место! Здесь можно легко заработать реальные деньги.
К вашим услугам несколько методов заработка!
Просматривайте сайты, читайте письма рекламодателей, выполняйте несложные и интересные тесты и задания за вознаграждение.
Вы сможете получить свои первые деньги уже сразу после начала работы.
Кликайте по баннеру ниже и начинайте работать!

SEO sprint - Всё для максимальной раскрутки!

Главная » Все материалы сайта » Справочник CSS-3 » Псевдоклассы

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

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
	8.0+	9.6+	5.0+	4.0+	2.1+	3.0+

Краткая информация

Применяется	К <input>
Ссылка на спецификацию	http://www.w3.org/TR/css3-ui/#pseudo-required-value

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Применяет стилевые правила к тегу <input>, у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы.

Синтаксис

input:optional { ... }

Значения

Нет.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>:optional</title>
 <style>
 input:optional {
 opacity: 0.5; /* Полупрозрачность */
 }
 </style>
 </head>
 <body>
 <form>
 <p>Пожалуйста, укажите ваше имя и возраст.</p>
 <p>Имя: <input name="name"></p>
 <p>Возраст: <input type="number" min="18" required name="old"></p>
 <p><input type="submit" value="Отправить"></p>
 </form>
 </body>
</html>

В данном примере необязательное текстовое поле делается полупрозрачным с помощью свойства opacity.

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

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :optional</title>
<style type="text/css">
<!--
h3 {
color:blue;
}
:required {
outline:2px solid green;
}
:optional {
outline:2px solid red;
opacity:0.5;
}
-->
</style>
</head>
<body>
<h3>Свойство выделяет поле не обязательное к заполнению</h3>
<p>Ваша фамилия - <input type="text" name="fam"></p>
<p>Ваше имя - <input type="number" required="required"></p>
<p>Ваш возраст - <input type="name" required="required"></p>
<p><input type="submit" value="Отправить"></p>
</body>
</html>

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

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Псевдоклассы | Добавил: evkuriy (08.07.2013)

Просмотров: 583 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]