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

Метод 1: только CSS – использование псевдокласса :focus

input:focus {
  border-color: #ff0000;
}

Метод 2: только CSS – использование псевдокласса :focus-within (для проектов на основе контейнеров)

.container:focus-within input {
  border-color: #00ff00;
}

Метод 3. JavaScript – добавление прослушивателей событий в поля ввода

<input type="text" id="myInput">
<script>
  const input = document.getElementById('myInput');
  input.addEventListener('focus', function() {
    this.style.borderColor = '#0000ff';
  });
  input.addEventListener('blur', function() {
    this.style.borderColor = '';
  });
</script>

Метод 4. JavaScript – использование манипуляций с классами

<input type="text" id="myInput">
<style>
  .selected {
    border-color: #ffff00 !important;
  }
</style>
<script>
  const input = document.getElementById('myInput');
  input.addEventListener('focus', function() {
    this.classList.add('selected');
  });
  input.addEventListener('blur', function() {
    this.classList.remove('selected');
  });
</script>

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