CSS CheckBOX 的自定义样式答案

【问题标题】：Custom Styling of CSS CheckBOXCSS CheckBOX 的自定义样式
【发布时间】：2022-01-26 10:05:50
【问题描述】：

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

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
这是我在 google 中找到的，但我仍然无法访问复选框输入 .check-and-help-field > label > input[type="radio"]{ color: green; }
一方面，这不是单选框

标签： css reactjs user-interface

【解决方案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;
}

【讨论】：