www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > FAQ > Формы > Как сделать, чтобы контентовое поле при получении фокуса...

Справочник по CSS (ЦСС) и ШТМЛ

Как сделать, чтобы контентовое поле при получении фокуса меняло цвет рамки?

Рамка вокруг контентового поля создается с помощью стилевого атрибута border, который добавляется к селектору INPUT. Фокусом же имеется ввиду активность элемента, в данном случае, курсор находится внутри контентового поля и пользователь может вводить символы с клавиатуры.

За работу фокуса отвечает псевдокласс focus, его необходимо через двоеточие добавляем к селектору INPUT или TEXTAREA.

Пример

Валидный HTML
Валидный CSS

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Изменение цвета рамки при </title>
<style type="text/CSS (ЦСС)">
INPUT.text {
 border: 1px solid #ccc; /* Исходная рамка вокруг поля */
 width: 80%; /* Ширина поля */
}
INPUT.text:focus {
 border: 1px solid #39c; /* Рамка при получении фокуса */
}
</style>
</head>
<body>
<form action="">
 <p><input type="text" size="30" class="text">
 <input type="submit" value="Отправить"></p>
</form>
</body>
</html>

Результат примера показан ниже. Чтобы поле получило фокус, щелкните внутри элемента, а для потери фокуса щелкните на любом месте рядом с ним.

В данном примере вводится класс text, чтобы стиль сработал только для контентового поля, а не для кнопки.

Замечание

Браузер Internet Эксплорер не поддерживает псевдокласс focus, поэтому приведенный метод в нем работать не будет.

Другие Уроки по этой теме

Поиск по сайту



FAQ

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект