Як зробити, щоб текстове поле при отриманні фокусу змінювало колір рамки

Рамка навколо текстового поля створюється за допомогою стильової властивості border. яке додається до селектора INPUT. Фокусом же називається активність елемента, в даному випадку, коли курсор знаходиться всередині текстового поля і користувач може вводити символи за допомогою клавіатури.

За роботу фокуса відповідає псевдоклас: focus. його необхідно додати до селектора INPUT або TEXTAREA. як показано в прикладі 1.

Приклад 1. Використання псевдокласу: focus

HTML5 CSS 2.1 IE Cr Op Sa Fx

Зміна кольору рамки

Результат прикладу показаний на рис. 1.

Мал. 1. Зміна стилю поля при отриманні фокусу

В даному прикладі вводиться клас text. щоб стиль спрацював тільки для текстового поля, а не для кнопки.

Оскільки псевдоклас: focus не підтримується браузером Internet Explorer до версії 8.0, для нього можна скористатися скриптами. З цією метою допоможе подія onfocus. яке спрацьовує при отриманні фокусу і onblur. при його втраті. Попередньо створюємо два класи, вони задають вид оформлення звичайного текстового поля і його ж при отриманні фокусу. Далі до тегу додаємо onfocus = "this.className =` focus` "і onblur =" this.className = `text`". Тут focus і text це назви класів (приклад 2).

Приклад 2. Використання скриптів

HTML5 CSS 2.1 IE Cr Op Sa Fx

Зміна кольору рамки