Saturday, October 5, 2019

bootstrap 4 material checkbox and radio button

October 05, 2019  No comments



<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>bootstrap 4 material checkbox and radio button</title>
</head>
<body>
<label class="custom-check">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<br><br>
<div class="form-check form-check-inline">
<label class="custom-radio">Call
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios1" value="Call" checked>
<span class="checkmark"></span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="custom-radio">Email
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios2" value="Email">
<span class="checkmark"></span>
</label>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
.custom-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-check input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.custom-check .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #e1e6eb
}
.custom-check:hover input~.checkmark {
background-color: #fff
}
.custom-check input:checked~.checkmark {
background-color: #fff;
border: 1px solid #e1e6eb;
display: flex;
justify-content: center;
align-items: center
}
.custom-check .checkmark:after {
content: url('data:image/svg+xml;charset=utf-8,<svg width="14" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M1.978 5.125L.75 6.353 4.697 10.3l8.772-8.772L12.241.3 4.697 7.844z" fill="%230B97B7" fill-rule="nonzero"/></svg>');
position: absolute;
display: none
}
.custom-check input:checked~.checkmark:after {
display: block
}
.custom-radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 18px;
font-family: cormorantlightitalic;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer
}
.custom-radio .checkmark {
position: absolute;
top: 5px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid #e1e6eb;
border-radius: 50%
}
.custom-radio .checkmark:after {
content: "";
position: absolute;
display: none
}
.custom-radio:hover input~.checkmark,
.custom-radio input:checked~.checkmark {
background-color: #fff;
border: 1px solid #0093b4
}
.custom-radio input:checked~.checkmark:after {
display: block
}
.custom-radio .checkmark:after {
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0093b4
}
view raw style.css hosted with ❤ by GitHub

Posted in: ,,

0 Comments:

Post a Comment