html – 更改复选框样式以匹配表单中的所有其余样式

概述我在Fluent Kit框架中使用了这个 login form,在示例中右边第三个,黑色框架. 它错过了一个我不知道如何改变的细节：复选框输入(你可以找到它的文档here,没什么意外,真的),当选中时,它不像框架信息颜色那样注册表单的其余部分,它是主要的.知道我如何改变它,或者我如何为不同的复选框生成样式,所以我不仅可以使用主要的,还可以使用其他复选框？ 在这里,我尝试使用codepen中的模板链 我在Fluent Kit框架中使用了这个 login form,在示例中右边第三个,黑色框架.

它错过了一个我不知道如何改变的细节：复选框输入(你可以找到它的文档here,没什么意外,真的),当选中时,它不像框架信息颜色那样注册表单的其余部分,它是主要的.知道我如何改变它,或者我如何为不同的复选框生成样式,所以我不仅可以使用主要的,还可以使用其他复选框？

在这里,我尝试使用codepen中的模板链接重新创建样式：

input[ID^="login2"]::-webkit-input-placeholder { color: #444444; }:-moz-placeholder {    color: #444444;    opacity: 1;}input[ID^="login2"]::-moz-placeholder {    color: #444444;    opacity: 1;}input[ID^="login2"]:-ms-input-placeholder { color: #444444; }input[ID^="login2"]::-ms-input-placeholder { color: #444444; }input[ID^="login2"]::placeholder { color: #444444; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/CSS/bootstrap.min.CSS" rel="stylesheet"/><link href="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.3.0/CSS/fluent-kit.min.CSS" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.3.1.slim.min.Js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/Js/bootstrap.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/popper.Js/1.14.0/umd/popper.min.Js"></script><script src="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.2.0/Js/fluent-kit.min.Js"></script><div >  <div >    <div >      <h5 >        Sign <span >in</span>      </h5>      <div ><hr ></div>      <div >        <fIEldset>          <label for="login2-email">Email</label>          <input ID="login2-email" type="email" name="email" placeholder="me@example.com">        </fIEldset>        <fIEldset>          <label for="login2-password">Password</label>          <input ID="login2-password" type="password" name="password" placeholder="******************" />          <button  data-toggle-password-visibility></button>        </fIEldset>        <div >          <fIEldset>            <input type="checkBox" ID="login2-remember-me" />            <label for="login2-remember-me">Remember me</label>          </fIEldset>          <small ><a  href="#">Forgot password?</a></small>        </div>        <div >          <small >            Not a member? <a  href="#">Register</a>          </small>          <button >            Sign in            <i ></i>          </button>        </div>        <div >          <small >or sign in with</small>          <div >            <a  href="#"><i ></i></a>            <a  href="#"><i ></i></a>            <a  href="#"><i ></i></a>            <a  href="#"><i ></i></a>          </div>        </div>      </div>    </div>  </div>  </div>

解决方法 添加此样式

input[type=checkBox]#login2-remember-me:checked+label:after {  background-color: #00B7C3;}

input[type=checkBox]#login2-remember-me:checked+label:after {  background-color: #00B7C3;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/CSS/bootstrap.min.CSS" rel="stylesheet" /><link href="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.3.0/CSS/fluent-kit.min.CSS" rel="stylesheet" /><script src="https://code.jquery.com/jquery-3.3.1.slim.min.Js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/Js/bootstrap.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/popper.Js/1.14.0/umd/popper.min.Js"></script><script src="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.2.0/Js/fluent-kit.min.Js"></script><div >  <div >    <div >      <h5 >        Sign <span >in</span>      </h5>      <div >        <hr >      </div>      <div >        <fIEldset>          <label for="login2-email">Email</label>          <input ID="login2-email" type="email" name="email" placeholder="me@example.com">        </fIEldset>        <fIEldset>          <label for="login2-password">Password</label>          <input ID="login2-password" type="password" name="password" placeholder="******************"  />          <button  data-toggle-password-visibility></button>        </fIEldset>        <div >          <fIEldset>            <input type="checkBox" ID="login2-remember-me" />            <label for="login2-remember-me">Remember me</label>          </fIEldset>          <small ><a  href="#">Forgot password?</a></small>        </div>        <div >          <small >            Not a member? <a  href="#">Register</a>          </small>          <button >            Sign in            <i ></i>          </button>        </div>        <div >          <small >or sign in with</small>          <div >            <a  href="#"><i ></i></a>            <a  href="#"><i ></i></a>            <a  href="#"><i ></i></a>            <a  href="#"><i ></i></a>          </div>        </div>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 更改复选框样式以匹配表单中的所有其余样式全部内容，希望文章能够帮你解决html – 更改复选框样式以匹配表单中的所有其余样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。