修改引导复选框样式
[英]Modifying bootstrap checkbox style
问题描述
我正在尝试创建一个复选框设计，其中每个复选框项目都有一个边框和白色背景。
到目前为止，我有 ff HTML：
<div class="col-lg-7">
<div class="mark">
<h3 class="q-item">Where do you want to live in the near future?</h3>
<div class="row">
<div class="col-lg-6">
<div class="form-check ps-0">
<label class="form-check-label q_check box">United States
<input class="form-check-input" name="" type="checkbox" value="US">
</label>
</div>
<div class="form-check ps-0">
<label class="form-check-label q_check box">India
<input class="form-check-input" name="" type="checkbox" value="India">
</label>
</div>
<div class="form-check ps-0">
<label class="form-check-label q_check box">Brazil
<input class="form-check-input" name="" type="checkbox" value="Brazil">
</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-check ps-0">
<label class="form-check-label q_check box">United Kingdom
<input class="form-check-input" name="" type="checkbox" value="UK">
</label>
</div>
<div class="form-check ps-0">
<label class="form-check-label q_check box">Europe
<input class="form-check-input" name="" type="checkbox" value="Europe">
</label>
</div>
<div class="form-check ps-0">
<label class="form-check-label q_check box">Turkey
<input class="form-check-input" name="" type="checkbox" value="Turkey">
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check ps-0">
<label class="form-check-label q_check box">I want to live nearby
<input class="form-check-input" name="" type="checkbox" value="None">
</label>
</div>
</div>
</div>
</div>
</div>
然后在我的 CSS 上：
.form-check{
padding: 14px 15px 14px 45px;
border-radius: 5px;
border: 1px solid #dedede;
background: #fff;
border-radius:
}
input[type="checkbox"].form-check-input
{
border-radius: 5px;
background: red;
margin-right: 10px;
}
当您 hover 鼠标指向每个项目时，它应该提供红色边框，并且当您在每个复选框上聚焦或单击鼠标时也是如此。
我如何获得相同的精确设计？ 如果您可以提供 codepen 或 jsfiddle，请提供。 谢谢！
1 个解决方案
解决方案1
0 2021-04-16 22:01:04
你可以试试这个：
<html>
<head>
<title>Modifying bootstrap checkbox style</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style type="text/css">
.form-check{
padding: 10px 10px 10px 40px;
border-radius: 5px;
border: 1px solid #dedede;
background: #fff;
margin-top: 12px;
}
.mark, mark {
padding: 1.5em;
background-color: #f7f9ff;
}
.mark label{
margin-top: 2px;
margin-bottom: 2px;
margin-left: 6px;
}
/* Hide the browser's default checkbox */
.form-check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 12px;
left: 12px;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 5px
}
/* On mouse-over, add a grey background color */
.form-check:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a red background */
.form-check input:checked ~ .checkmark {
background-color: #dc3545;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.form-check input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.form-check .checkmark:after {
left: 8px;
top: 4px;
width: 8px;
height: 14px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="col-lg-7">
<div class="mark">
<h3 class="q-item">Where do you want to live in the near future?</h3>
<div class="row">
<div class="col-lg-6">
<div class="form-check">
<label>United States<input type="checkbox" value="US"><span class="checkmark"></span></label>
</div>
<div class="form-check">
<label>India<input type="checkbox" value="India"><span class="checkmark"></span></label>
</div>
<div class="form-check">
<label>Brazil<input type="checkbox" value="Brazil"><span class="checkmark"></span></label>
</div>
</div>
<div class="col-lg-6">
<div class="form-check">
<label>United Kingdom<input type="checkbox" value="UK"><span class="checkmark"></span></label>
</div>
<div class="form-check">
<label>Europe<input type="checkbox" value="Europe"><span class="checkmark"></span></label>
</div>
<div class="form-check">
<label>Turkey<input type="checkbox" value="Turkey"><span class="checkmark"></span></label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check">
<label>I want to live nearby<input type="checkbox" value="None"><span class="checkmark"></span></label>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
我还发现，您示例中使用的字体是Bergen Sans 。 但是它不是免费提供的，或者这里有一些演示链接，但您必须手动下载并包含它。
如何在引导程序中验证样式为= display：none的复选框？
[英]how to validate a checkbox with the style =display:none in bootstrap?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.