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

Question

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

score -1 · Answer 1 · answered Mar 21 '22 at 13:12

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

answered Mar 21 '22 at 13:12

Yash porwal

301
3
9

how will you check if its empty? – Tushar Gupta Mar 21 '22 at 13:15
for that you have to use javascript – Yash porwal Mar 21 '22 at 13:17
Not really no :) – Tushar Gupta Mar 21 '22 at 13:18

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

1 Answers1