CSS 复选框的自定义样式

Question

我想在标签内设置 CSS 复选框输入的样式 This checkbox 不是 'Remember Me' 标签，但图片中显示的输入字段让它在没有输入时显示白色，当没有输入时我想要灰色而不是矩形我想要一个具有边框半径的矩形，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>

Answer 1

您不能设置复选框的样式，而是它的标签。

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

CSS 复选框的自定义样式

Custom Styling of CSS CheckBOX

css

user-interface

reactjs