| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Рамка навколо текстового поля створюється з допомогою стильового властивості border, яке додається до селектору INPUT. Фокусом ж називається активність елемента, в даному випадку, коли курсор знаходиться всередині текстового поля і користувач може вводити символи з клавіатури.
За роботу фокуса відповідає псевдоклас :focus, його необхідно додати до селектору INPUT або TEXTAREA, як показано в прикладі 1.
Приклад 1. Використання псевдокласу :focus
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Зміна кольору рамки</title>
<style>
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" /></p>
<p><input type="submit" value="Відправити" /></p>
</form>
</body>
</html>
Результат приклад показаний на рис. 1.
Рис. 1. Зміна стилю поля при отриманні фокусу
В даному прикладі вводиться клас text, щоб стиль спрацював тільки для текстового поля, а не для кнопки.
Оскільки псевдоклас :focus не підтримується браузером Internet Explorer до версії 8.0, для нього можна скористатися скриптами. З цією метою допоможе подія onfocus, яке спрацьовує при отриманні фокусу і onblur, при його втраті. Попередньо створюємо два класу, вони задають вид оформлення звичайного текстового поля і його ж при отриманні фокусу. Далі до тега <input> додаємо onfocus="this.className='focus'" і onblur="this.className='text'". Тут focus і text це назви класів (приклад 2).
Приклад 2. Використання скриптів
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Зміна кольору рамки</title>
<style>
INPUT.text {
border: 1px solid #ccc; /* Вихідна рамка навколо поля */
width: 80%; /* Ширина поля */
}
.focus {
border: 1px solid #39c; /* Рамка при одержанні фокуса */
width: 80%; /* Ширина поля */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" size="30" class="text"
onfocus="this.className='focus'" onblur="this.className='text'" /></p>
<p><input type="submit" value="Відправити" /></p>
</form>
</body>
</html>