我想在标签内设定我的 CSS 复选框输入的样式这个复选框 不是“记住我”标签,而是显示在图片中的输入栏位让它在没有输入时显示白色,当没有输入时我想要灰色而不是矩形我想要一个有边框半径的矩形,chkbox的大小必须大于org,选择后我想要不同的风格。
<form>
<div className="form-fields">
<input placeholder="Email or phone number" type="email"></input>
<input placeholder="Password" type="password"></input>
<button className="SignInOrUp">Sign In Or Sign Up</button>
</div>
<div className="check-and-help-field">
<label>
<input type="checkbox"></input>
Remember me
</label>
<a href="/">Need Help?</a>
</div>
<div className="other">
<a href="/" id="facebook-login">
Login with Facebook
</a>
<p>
This page is protected by Google reCAPTCHA to ensure you're not a
bot.
<a href="/" id="learn-more">
Learn more.
</a>
</p>
</div>
</form>
uj5u.com热心网友回复:
您不能为复选框设定样式,但可以为其标签设定样式。
<input type="checkbox">
<label>
<div class="custom-checkbox"></div> my checkbox
</label>
[type="checkbox"] {
opacity: 0;
position: absolute;
}
[type="checkbox"]:checked ~ .custom-checkbox{
opacity: 1;
width: 10px;
height: 10px;
background-color: grey;
}
0 评论