Custom Styling of CSS CheckBOX-CodePudding

I want to style my CSS Checkbox input inside a label This checkbox Not 'Remember Me' label but that input field show in picture let it show white color when not having a input, i want gray when not having a input and instead of rectangle i want a rectangle of having border radius ,size of chkbox must be bigger than org, and after selected i want different style.

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

CodePudding user response：

You can't style a checkbox, but its label.

<input type="checkbox">
<label>
  <div ></div> my checkbox
</label>

[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

[type="checkbox"]:checked ~ .custom-checkbox{
    opacity: 1;
    width: 10px;
    height: 10px;
    background-color: grey;
}