'How can I change input styling when there's a value? [duplicate]

I have an input field and now I want to style it in a way so that whenever the input field is empty we need a normal border of black color and on focus need to change to red on filling.

.form-control {
  width: 300px;
  height: 40px;
  margin: 0 auto 0 auto;
  border: 1px solid red;
  border-radius: 3px;
}
<input class="form-control" placeholder="Password" name="password" type={passwordShown ? "text" : "password"} value={formValues.password} onChange={handleChange} />
htmlcss


Solution 1:[1]

Try this code:

.form-control {
  width: 300px;
  height: 40px;
  margin: 0 auto 0 auto;
  border: 1px solid #000;
  border-radius: 3px;
 }
.form-control:hover,.form-control:focus {
  border: 1px solid #f00;
}
<input class="form-control" placeholder="Password" name="password" type={passwordShown ? "text" : "password"} value={formValues.password} onChange={handleChange} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yash porwal

Related Questions