css селектор при снятии фокуса с ввода - PullRequest
Новая
       4

css селектор при снятии фокуса с ввода

2 голосов
/ 01 августа 2020

У меня есть элемент ввода.

  1. Элемент изначально имеет черную рамку.
  2. Я применяю к нему синюю рамку, когда элемент сфокусирован.

Требование : Теперь, когда я убираю с него фокус, я хочу, чтобы граница была красной.

Я пробовал с input:not(focus), но он также меняет начальное состояние.

ссылка jsbin 

input {
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  transition: 0.4s ease-out;
}

input:focus {
  border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="field">
    <input type="text" required>
  </div>

</body>

</html>

Ответы [ 3 ]

1 голос
/ 01 августа 2020

Согласно вашему требованию, это должно работать. Добавьте класс в свой элемент ввода и тег onblur к нему, который будет ссылаться на функцию в javascript. Таким образом, элемент в конечном итоге будет выглядеть на строках этого. 

<input type="text" class="textField" onblur="focusToggle()" required>

В теге скрипта напишите эту функцию 

function focusToggle()
  {document.querySelector(".textField").classList.add("outOfFocus");
  }

И в css добавьте определение стиля для новый класс 

.outOfFocus{
  border-bottom: 2px solid red;
}

Итак, наконец, все это будет выглядеть примерно так. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="field">
    <input type="text" class="textField" onblur="focusToggle()" required>
  </div>
    <script>
    function focusToggle()
      {document.querySelector(".textField").classList.add("outOfFocus");
      }
  </script>
</body>
</html>

И последний CSS. 

input {
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  transition: 0.4s ease-out;
}

input:focus {
  border-bottom: 2px solid blue;
}
.outOfFocus{
  border-bottom: 2px solid red;
}

Надеюсь на это помогло. Удачного кодирования.

0 голосов
/ 03 августа 2020

Вы можете использовать селектор CSS :valid, это работает, только если у вас установлен атрибут required, а input имеет допустимый ввод. 

input {
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  transition: 0.4s ease-out;
}

input:valid {
  border-color: red;
}

input:focus {
  border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="field">
    <input type="text" required>
  </div>

</body>

</html>
0 голосов
/ 02 августа 2020

Используйте прослушиватель событий javascript для размытия, чтобы, когда пользователь фокусируется за пределами ввода, событие запускалось ... Затем установите стиль вашего нижнего края на красный цвет, используя element.style.borderBottom = '2px solid red'

См. Мой фрагмент для примера ... 

// define a variable for your element and target the first child using .children[0]
let target = document.querySelector('.field').children[0];

// now use that variable and add an event listener to fire on blur
target.addEventListener('blur', function(){

  // set your target elements border-bottom to the desired css
  target.style.borderBottom = '2px solid red';

})
input {
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  transition: 0.4s ease-out;
}

input:focus {
  border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="field">
    <input type="text" required>
  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...