CODEWITHSUNDEEP
htmlcss
thewebtud
thewebtud

Reputation: 574

css selector when focus is removed from input

I have an input element.

  1. The element has Black border initially.
  2. 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.

jsbin link

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>

Upvotes: 2

Views: 1418

Answers (3)

Red
Red

Reputation: 7299

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>

Upvotes: 1

dale landry
dale landry

Reputation: 8600

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>

Upvotes: 0

Adil Ahmed
Adil Ahmed

Reputation: 435

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.

Upvotes: 1

Related Questions