Modifying bootstrap checkbox style
Question
I am trying to create a checkbox design where in there is a border for each checkbox item and a background of white.
So far I have the 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>
And then on my 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;
}
When you hover your mouse to each item it should supply a red border and also when you focus or click your mouse on each checkbox.
How do I attain the same exact design? Please if you can provide a codepen or jsfiddle. Thanks!
1 answers
solution1
0 2021-04-16 22:01:04
You can try this:
<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>
I also found, that font used in your example is Bergen Sans . However it is not available for free, or here are some demo links, but you have to download and include it manually.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Modifying height of inherited bootstrap style
Bootstrap uncheck checkbox and style
Style Bootstrap 4 Custom Checkbox
How to override bootstrap checkbox style
How do you change the style of a bootstrap checkbox
how to validate a checkbox with the style =display:none in bootstrap?
Bootstrap 4 form change checkbox valid style
Bootstrap 3 checkbox css style in yii2 active form
Modifying a CSS style
Modifying Bootstrap @media
Related Tags