CSS по шагам

       

Применение псевдокласса focus


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

INPUT:focus {

 color: red /* Красный цвет текста */

}

</style>

</head>

<body>

<form>

 <input type="text" value="Черный текст">

</form>

</body>

</html>

Результат примера показан ниже.

input.ex:focus {color: red}

В данном примере в текстовом поле содержится предварительный текст, он определяется значением параметра value тега <INPUT>. При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щелкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернется к первоначальному черному цвету.

Замечание 1

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.

Замечание 2

Псевдокласс focus не поддерживается браузером Internet Explorer.



Содержание раздела