Чтобы изменить цвет границы ввода при фокусе с помощью jQuery, вы можете использовать следующие методы:

Метод 1. Использование методов focus() и Blur():

$(document).ready(function() {
  $("input").focus(function() {
    $(this).css("border-color", "red");
  });
  $("input").blur(function() {
    $(this).css("border-color", ""); // Resetting the border color
  });
});

В этом методе метод focus()используется для определения того, когда поле ввода находится в фокусе, а метод blur()используется для определения того, когда поле ввода находится в фокусе. поле теряет фокус. Затем метод css()используется для изменения атрибута цвета границы.

Метод 2. Использование методов focusin() и focusout():

$(document).ready(function() {
  $("input").focusin(function() {
    $(this).css("border-color", "red");
  });
  $("input").focusout(function() {
    $(this).css("border-color", ""); // Resetting the border color
  });
});

Этот метод аналогичен методу 1, но использует методы focusin()и focusout()вместо focus()и >blur().

Метод 3. Использование классов CSS и toggleClass():

$(document).ready(function() {
  $("input").focus(function() {
    $(this).toggleClass("focused");
  });
});

В этом методе вы определяете класс CSS с именем «focused» и желаемым цветом границы. Метод toggleClass()используется для переключения класса, когда поле ввода находится в фокусе или размыто.

Метод 4. Использование псевдоклассов CSS:

input:focus {
  border-color: red;
}

Этот метод не требует кода JavaScript. Вместо этого вы можете использовать псевдоклассы CSS для стилизации поля ввода, когда оно находится в фокусе.