В веб-разработке очень важно обеспечить удобство взаимодействия с пользователем за счет повышения интерактивности полей ввода. Один из эффективных способов добиться этого — изменить цвет границы поля ввода, когда оно выбрано. В этой статье мы рассмотрим несколько способов добиться этого на примерах кода.

Метод 1: использование псевдокласса CSS Focus
Самый простой способ изменить цвет границы выделенного поля ввода — использовать псевдокласс CSS :focus. Для этого метода требуется только CSS и не используется JavaScript.

input:focus {
  border-color: #ff0000; /* Replace with desired color */
}

Метод 2: прослушиватели событий JavaScript.
Другой подход — использовать прослушиватели событий JavaScript для добавления и удаления класса CSS, когда поле ввода выбрано или отменено.

HTML:

<input type="text" id="myInput">

CSS:

.input-selected {
  border-color: #00ff00; /* Replace with desired color */
}

JavaScript:

const inputField = document.getElementById('myInput');
inputField.addEventListener('focus', function() {
  inputField.classList.add('input-selected');
});
inputField.addEventListener('blur', function() {
  inputField.classList.remove('input-selected');
});

Метод 3: jQuery
Если вы используете jQuery в своем проекте, вы можете добиться того же эффекта с меньшим количеством кода.

HTML:

<input type="text" id="myInput">

JavaScript (с jQuery):

$('#myInput').focus(function() {
  $(this).addClass('input-selected');
});
$('#myInput').blur(function() {
  $(this).removeClass('input-selected');
});

Изменяя цвет границы поля ввода, когда оно выбрано, вы можете улучшить визуальную обратную связь и улучшить общее взаимодействие с пользователем. Независимо от того, предпочитаете ли вы решение, основанное только на CSS, или хотите использовать JavaScript или jQuery, эти методы предоставят вам гибкость для реализации этой функции в ваших веб-приложениях.