css selector when focus is removed from input

Question

I have an input element.

The element has Black border initially.
I'm applying blue border to it when the element is focused.

Requirement: Now when I remove the focus from it, I want the border to be red.

I tried with input:not(focus) but it's changing the initial state also.

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>

Adil Ahmed · Accepted Answer · 2020-08-01 20:29:57Z

As per your requirement, this should work. Add a class to your input element, and a onblur tag to it which would refer to a function in the javascript. Thus the element would eventually look on the lines of this.

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

In the script tag, write this function

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

And in the css add a style definition for the new class

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

So finally, the whole thing would look something like this.

<!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>

And the final 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;
}

Hope this helped. Happy Coding.

Red · Accepted Answer · 2020-08-03 20:14:53Z

1

You could use the CSS :valid selector, this only works when you have the required attribute set and the input has a valid input though.

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>

answered Aug 3, 2020 at 20:14

Red

7,46310 gold badges53 silver badges98 bronze badges

Comments

dale landry · Accepted Answer · 2020-08-01 22:13:39Z

Use a javascript event listener on blur so that when the user focuses out of the input the event fires... Then set the style of your border-bottom to the red color using element.style.borderBottom = '2px solid red'

See my snippit for an example...

// 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>

Collectives™ on Stack Overflow

css selector when focus is removed from input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related