拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 CSSCheckBOX的自定义样式

CSSCheckBOX的自定义样式

白鹭 - 2022-02-14 2109 0 0

我想在标签内设定我的 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 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *