| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Прибрати рамку навколо елемента форми при отриманні ним фокуса в браузерах Safari і Chrome.
Рішення
В браузерах Safari і Chrome навколо текстового поля при отриманні фокусу спостерігається характерне світіння, яке вказує активне поле (рис. 1). Якщо по дизайну світіння не потрібно, його можна прибрати, додавши властивість outline зі значенням none до селектору input:focus. Псевдоклас :focus говорить про те, що стиль застосовується до елемента отримали фокус.
Рис. 1. Світіння навколо текстового поля в Safari
Приклад
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстове поле</title>
<style>
input[type="text"]:focus { outline: none; }
</style>
</head>
<body>
<form action="handler.php">
<p><input type="text"></p>
</form>
</body>
</html>
Оскільки в інших браузерах не виникає світіння навколо полів форми при отриманні фокусу, наведений стиль ніяк себе не проявить.
Виділення активних елементів форм в Safari і Chrome застосовується не тільки до текстових полів, але і до інших елементів. Щоб прибрати світіння лише для певних елементів, в даному прикладі використовується конструкція input[type="text"], яка говорить: «використовувати стиль для тега <input> тільки з атрибутом type рівним text».