| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0 + | 1.0 + | 7.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
| Застосовується | До елементів, які можуть отримати фокус ( <a> , <input> , <select> і <textarea> ) |
|---|---|
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Псевдоклас : focus визначає стиль для елемента отримує фокус. Наприклад, їм може бути текстове поле форми, в яке встановлюється курсор.
Синтаксис
елемент: focus {...}
Значення
Ні.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
focus </title>
<style>
#enter .label {width: 80px; /* Ширина блоку з текстом */ float: left; /* Розташування в один рядок з полем */ text-align: right; /* Вирівнювання по правому краю */ } #enter .form-text {width: 240px; /* Ширина поля */ margin-left: 10px; /* Відстань між полем і текстом */ border: 1px solid #abadb3; /* Рамка навколо текстового поля */ padding: 2px; /* Поля навколо тексту */ } #enter .form-item {margin-bottom: 5px; /* Відступ знизу */ } #enter .form-text: focus {background: #ffe; /* Колір фону */ border: 1px solid #29B0D9; /* Параметри рамки */ } #enter p {margin-left: 90px; /* Зсув вправо */ } </style>
</head>
<body>
<form action="login.php" method="post" id="enter">
<div class="form-item">
<span class="label">
Логін: </span>
<span class="field">
<input type="text" name="login" value="" class="form-text">
</span>
</div>
<div class="form-item">
<span class="label">
Пароль: </span>
<span class="field">
<input type="password" name="pass" class="form-text">
</span>
</div>
<p>
<input type="submit" value="Ввійти"/>
</p>
</form>
</body>
</html>
Результат даного прикладу показаний на рис. 1. При отриманні фокусу текстове поле змінює колір фону і колір межі.
Браузери
Chrome Не додає стиль для селектора a, щоб змусити його розуміти правило a: focus, додайте до тегу <a> атрибут tabindex .
<a href="/1.html" tabindex="1"> Посилання </a>