当有值时，如何更改输入样式？

Question

我有一个输入字段，现在我想以某种方式对其进行样式设置，以便每当输入字段为空时，我们都需要一个黑色的正常边界，并且在填充时需要将焦点更改为红色。

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

Answer 1

试试这个代码：

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