更改复选框样式以匹配表单中的所有其他样式
Change checkbox styles to match all the rest in a form
我使用 Fluent Kit 框架中的 login form，示例右侧第三个，深色框架。
它遗漏了一个我不知道如何更改的细节：复选框输入（您可以找到它的文档 here，没有意外，真的），当 checked 不在框架中时info 颜色和注册表的其余部分一样，是primary。知道如何更改它，或者如何为不同的复选框生成样式，以便我不仅可以使用主要复选框，还可以使用其他复选框吗？
我在这里尝试使用代码笔中的模板链接重新创建样式：
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 class="row">
<div class="col-xl-4 col-lg-6 col-md-8 py-2">
<div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
<h5 class="py-3 text-center bold bg-darkdimgrey">
Sign <span class="text-info">in</span>
</h5>
<div class="px-3"><hr class="my-0"></div>
<div class="px-3 pt-3">
<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="******************" class="input-with-button"/>
<button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
</fieldset>
<div class="d-flex my-2">
<fieldset>
<input type="checkbox" id="login2-remember-me" />
<label for="login2-remember-me">Remember me</label>
</fieldset>
<small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
</div>
<div class="d-flex pb-3 mt-2">
<small class="d-inline-block py-1">
Not a member? <a class="text-info bold" href="#">Register</a>
</small>
<button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
Sign in
<i class="mi mi-ChevronRight"></i>
</button>
</div>
<div class="pb-3 text-center">
<small class="d-block mb-3">or sign in with</small>
<div class="pb-3 d-flex justify-content-around">
<a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
<a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
<a class="text-white" href="#"><i class="mi mi-google"></i></a>
<a class="text-white" href="#"><i class="mi mi-linkedin"></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 class="row">
<div class="col-xl-4 col-lg-6 col-md-8 py-2">
<div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
<h5 class="py-3 text-center bold bg-darkdimgrey">
Sign <span class="text-info">in</span>
</h5>
<div class="px-3">
<hr class="my-0">
</div>
<div class="px-3 pt-3">
<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="******************" class="input-with-button" />
<button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
</fieldset>
<div class="d-flex my-2">
<fieldset>
<input type="checkbox" id="login2-remember-me" />
<label for="login2-remember-me">Remember me</label>
</fieldset>
<small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
</div>
<div class="d-flex pb-3 mt-2">
<small class="d-inline-block py-1">
Not a member? <a class="text-info bold" href="#">Register</a>
</small>
<button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
Sign in
<i class="mi mi-ChevronRight"></i>
</button>
</div>
<div class="pb-3 text-center">
<small class="d-block mb-3">or sign in with</small>
<div class="pb-3 d-flex justify-content-around">
<a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
<a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
<a class="text-white" href="#"><i class="mi mi-google"></i></a>
<a class="text-white" href="#"><i class="mi mi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
我使用 Fluent Kit 框架中的 login form，示例右侧第三个，深色框架。
它遗漏了一个我不知道如何更改的细节：复选框输入（您可以找到它的文档 here，没有意外，真的），当 checked 不在框架中时info 颜色和注册表的其余部分一样，是primary。知道如何更改它，或者如何为不同的复选框生成样式，以便我不仅可以使用主要复选框，还可以使用其他复选框吗？
我在这里尝试使用代码笔中的模板链接重新创建样式：
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 class="row">
<div class="col-xl-4 col-lg-6 col-md-8 py-2">
<div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
<h5 class="py-3 text-center bold bg-darkdimgrey">
Sign <span class="text-info">in</span>
</h5>
<div class="px-3"><hr class="my-0"></div>
<div class="px-3 pt-3">
<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="******************" class="input-with-button"/>
<button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
</fieldset>
<div class="d-flex my-2">
<fieldset>
<input type="checkbox" id="login2-remember-me" />
<label for="login2-remember-me">Remember me</label>
</fieldset>
<small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
</div>
<div class="d-flex pb-3 mt-2">
<small class="d-inline-block py-1">
Not a member? <a class="text-info bold" href="#">Register</a>
</small>
<button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
Sign in
<i class="mi mi-ChevronRight"></i>
</button>
</div>
<div class="pb-3 text-center">
<small class="d-block mb-3">or sign in with</small>
<div class="pb-3 d-flex justify-content-around">
<a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
<a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
<a class="text-white" href="#"><i class="mi mi-google"></i></a>
<a class="text-white" href="#"><i class="mi mi-linkedin"></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 class="row">
<div class="col-xl-4 col-lg-6 col-md-8 py-2">
<div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
<h5 class="py-3 text-center bold bg-darkdimgrey">
Sign <span class="text-info">in</span>
</h5>
<div class="px-3">
<hr class="my-0">
</div>
<div class="px-3 pt-3">
<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="******************" class="input-with-button" />
<button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
</fieldset>
<div class="d-flex my-2">
<fieldset>
<input type="checkbox" id="login2-remember-me" />
<label for="login2-remember-me">Remember me</label>
</fieldset>
<small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
</div>
<div class="d-flex pb-3 mt-2">
<small class="d-inline-block py-1">
Not a member? <a class="text-info bold" href="#">Register</a>
</small>
<button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
Sign in
<i class="mi mi-ChevronRight"></i>
</button>
</div>
<div class="pb-3 text-center">
<small class="d-block mb-3">or sign in with</small>
<div class="pb-3 d-flex justify-content-around">
<a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
<a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
<a class="text-white" href="#"><i class="mi mi-google"></i></a>
<a class="text-white" href="#"><i class="mi mi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>