/* The container */
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<!DOCTYPE html>
<html>
<body>
<h1>Custom Checkboxes</h1>
<div class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
<label>One</label>
</div>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>
I would like to arrange the label tag on the same level and after the input tag. So I could give it a css tag, when the input tag is disabled. I can't figure out, how to do it. So I can give the label tag a opacity, when the input tag is disabled.
I tried it with a div, and arrange the label after the input or the span tag. But it doesn't work.
First Checkbox don't work, because I changed the label tag. But this is what I'd like to have.
Wrap your input & span into a label
<h1>Custom Checkboxes</h1>
<div class="container">
<label for="one">One
<input id="one" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
https://jsfiddle.net/lalji1051/xtn3esqu/5/
You have to use position: absolute; for the label to make the clickable space larger.
/* The container */
.container {
display: block;
position: relative;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Additional styles */
.check-wrapper {
position: relative;
width: 100px;
}
label[for="check1"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-left: 30px;
cursor: pointer;
/* outline to see the difference */
border: 1px solid red;
}
<h1>Custom Checkboxes</h1>
<div class="container">
<!-- added a wrapper -->
<div class="check-wrapper">
<input id="check1" type="checkbox" checked="checked">
<span class="checkmark"></span>
<label for="check1">One</label>
</div>
</div>
Hope this helps
.customCheckBox__Wrapper {
display: flex;
width: auto;
flex-flow: row wrap;
flex-basis: auto;
position: relative;
box-sizing: border-box;
margin: 0.125em;
}
.customCheckBox__Wrapper * {
box-sizing: border-box;
}
.cstumLbl_ {
transition: all 200ms ease-in-out;
content: "";
display: flex;
flex: 0 auto auto;
padding: 0.125em 0.5em;
width: 100%;
position: relative;
line-height: 1.4em;
padding-left: 2.5em;
}
.cstumLbl_:hover {
cursor: pointer;
}
.glyp_checked {
display: block;
opacity: 1;
width: 24px;
height: 24px;
position: absolute;
left: 6.5px;
top: 0.5px;
fill: #ffffff;
z-index: 200;
margin-right: 1.75em;
border: 1px solid #808080;
transition: all 200ms ease-in-out;
}
.cstumChxBx_ {
display: inline;
position: absolute;
z-index: -10;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
left: 50%;
top: 50%;
}
.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
display: block;
opacity: 1;
border-radius: 2px;
}
.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked {
background: #000080;
fill: #ffffff;
}
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked {
background: #ffffff;
fill: #000000;
border-color: #000080;
}
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
background: #008080;
fill: #ffffff;
}
.cstumChxBx_:disabled+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._RgsCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._RgsCse__>.glyp_checked {
background: rgba(120, 120, 120, 0.25);
border: 1px solid #787878;
display: block;
opacity: 0.2;
fill: #3f3f3f;
}
<svg style="display:none;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<symbol viewBox="0 0 24 24" id="checked_">
<path d="M18,6l-7.8,7.8c-0.4,0.4-1,0.4-1.4,0L6,10.9c-0.4-0.4-1-0.4-1.4,0l-0.7,0.7c-0.4,0.4-0.4,1,0,1.4l3.5,3.5l0,0L8.8,18
c0.4,0.4,1,0.4,1.4,0l9.9-9.9c0.4-0.4,0.4-1,0-1.4L19.4,6C19,5.6,18.4,5.6,18,6z"/>
</symbol>
</svg>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" disabled checked type="checkbox" id="normal_" />
<label class="cstumLbl_ _SplCse__" for="normal_">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 1</span>
</label>
</span>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" type="checkbox" id="Normal__" />
<label class="cstumLbl_ _NrmlCse__" for="Normal__">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 2</span>
</label>
</span>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" type="checkbox" id="intermediate_" />
<label class="cstumLbl_ _RgsCse__" for="intermediate_">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 3</span>
</label>
</span>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
/* The container */
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
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="container">
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
Is it possible to style check box like this, and change its background!
tried shadow box and the outline
the best I have reach is with the :before method but still not close
here what I have tried
CSS
.table__check-box {
background-color: red;
position: relative;
height: 1.75rem;
width: 1.75rem;
margin-right: 2.3rem;
margin-top: 1rem;
}
.table__check-box--inactive {
background-color: #a4a9ae;
}
.table__check-box:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}
HTML
<input class="table__check-box" type="checkbox">
Input element does not have content, so there should be no :before. Better use table__check-box + label:before:
* {
box-sizing: border-box;
}
.table__check-box {
opacity: .3;// Just for display
// Uncomment:
// display: none;
}
.table__check-box + label {
background-color: red;
display: inline-block;
position: relative;
height: 1.75rem;
width: 1.75rem;
margin-right: 2.3rem;
margin-top: 1rem;
overflow: hidden;
border-radius: 5px;
border: 2px solid #ccc;
}
.table__check-box:not(:checked) + label {
background-color: #a4a9ae;
}
<div class="input-wrapper">
<input id="active-checkbox" class="table__check-box" type="checkbox"/>
<label for="active-checkbox"></label>
</div>
w3schools has a good post on this.
Tweaking their example slightly, you'll want to wrap your checkbox in a label, form elements should always have labels and it gives you the option to add an optional text label (like in the fiddle).
<label class="checkbox-container">
<input type="checkbox" checked="checked">
<span class="checkbox-state"></span>
</label>
<label class="checkbox-container">
<input type="checkbox">
<span class="checkbox-state"></span>
</label>
<label class="checkbox-container">
<input type="checkbox">
<span class="checkbox-state"></span>
</label>
/* Customize the label (the container) */
.checkbox-container {
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Style the checkbox */
.checkbox-container input ~ .checkbox-state {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
display: block;
width: 20px;
height: 20px;
}
/* Style the checkbox */
.checkbox-container input:checked ~ .checkbox-state {
background-color: #ccc;
}
Working fiddle: https://jsfiddle.net/zano29jd/
Good day all. I have a small problem whereby i want my checkboxes for the course preferences to be in the middle not towards the right in the same position as the other textboxes at the bottom. i want it to be the center in the page. Like somewhere starting after the letter D in academic. No matter what i try, the checboxes are bounded to the right side. I tried to float it but it does not work.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.containertwo {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label > span, p > span {
width: 50%;
display: inline-block;
}
This is the html code.
<!DOCTYPE HTML>
<html>
<head>
<title>Register Form</title>
<link rel="stylesheet" type="text/css" href="report.css">
</head>
<body>
<form action="Form2.php" method="POST">
<div class="firstform">
<h1>COURSE PREFERENCE</h1>
<div class="outer-container">
<p><label class="container">Information Technology
<input type="checkbox" name="course" value = "Information Technology">
<span class="checkmark"></span></label></p>
<p><label class="container">Management
<input type="checkbox" name="course" value = "Management">
<span class="checkmark"></span></label></p>
<p><label class="container">Business Administration
<input type="checkbox" name="course" value = "Business Administration">
<span class="checkmark"></span></label></p>
<p><label class="container">Culinary Arts
<input type="checkbox" name="course" value = "Culinary Arts">
<span class="checkmark"></span></label></p>
<p><label class="container">Early Childhood Education
<input type="checkbox" name="course" value = "Early Childhood Education">
<span class="checkmark"></span></label></p>
<p>
<label class="container">
Hotel Management<input type="checkbox" name="course"value = "Hotel Management">
<span class="checkmark"></span></label></p>
<h1>ACADEMIC QUALIFICATION</h1>
<p><label><span>Higher Qualification</span><select name="qualification">
<option selected>SPM</option>
<option>STPM</option>
<option>O-Level</option>
<option>Foundation</option>
<option>A-Level</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Instituiton:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Country:</span><select name="country">
<option selected>Malaysia</option>
<option>International</option>
</select>
</label>
</p>
<p>
<label><span>Date commenced </span></label><input type="date" name="date_commenced">
</p>
<p>
<label><span>Date completed</span></label><input type="date" name="date_complete">
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
</body>
</html>
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label>span,
p>span {
width: 50%;
display: inline-block;
}
<form action="Form2.php" method="POST">
<div class="firstform">
<h1>COURSE PREFERENCE</h1>
<p><label class="containertwo">Information Technology
<input type="checkbox" name="course" value = "Information Technology">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Management
<input type="checkbox" name="course" value = "Management">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Business Administration
<input type="checkbox" name="course" value = "Business Administration">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Culinary Arts
<input type="checkbox" name="course" value = "Culinary Arts">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Early Childhood Education
<input type="checkbox" name="course" value = "Early Childhood Education">
<span class="checkmark"></span></label></p>
<p>
<label class="containertwo">
Hotel Management<input type="checkbox" name="course"value = "Hotel Management">
<span class="checkmark"></span></label></p>
</div>
<h1>ACADEMIC QUALIFICATION</h1>
<p><label><span>Higher Qualification</span><select name="qualification">
<option selected>SPM</option>
<option>STPM</option>
<option>O-Level</option>
<option>Foundation</option>
<option>A-Level</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Instituiton:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Country:</span><select name="country">
<option selected>Malaysia</option>
<option>International</option>
</select>
</label>
</p>
<p>
<label><span>Date commenced </span></label><input type="date" name="date_commenced">
</p>
<p>
<label><span>Date completed</span></label><input type="date" name="date_complete">
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
There are several ways to center elements with css, one way I use to center a group of elements, is by enclosing all those elements in a container tag like div and position this container tag.
So enclose all your checkbox tags, within a div tag with a class (for example) say "outer-container" and give it the following css:
.outer-container {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
and remove the margin-left from your .container css
I have made those changes in the below code snippet, do try this method out.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
border-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.outer-container {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
/* margin-left: 24em; */
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label>span,
p>span {
width: 50%;
display: inline-block;
}
<form action="Form2.php" method="POST">
<div class="firstform">
<h1>COURSE PREFERENCE</h1>
<div class="outer-container">
<p><label class="container">Information Technology
<input type="checkbox" name="course" value = "Information Technology">
<span class="checkmark"></span></label></p>
<p><label class="container">Management
<input type="checkbox" name="course" value = "Management">
<span class="checkmark"></span></label></p>
<p><label class="container">Business Administration
<input type="checkbox" name="course" value = "Business Administration">
<span class="checkmark"></span></label></p>
<p><label class="container">Culinary Arts
<input type="checkbox" name="course" value = "Culinary Arts">
<span class="checkmark"></span></label></p>
<p><label class="container">Early Childhood Education
<input type="checkbox" name="course" value = "Early Childhood Education">
<span class="checkmark"></span></label></p>
<p>
<label class="container">
Hotel Management<input type="checkbox" name="course"value = "Hotel Management">
<span class="checkmark"></span></label></p>
</div>
<h1>ACADEMIC QUALIFICATION</h1>
<p><label><span>Higher Qualification</span><select name="qualification">
<option selected>SPM</option>
<option>STPM</option>
<option>O-Level</option>
<option>Foundation</option>
<option>A-Level</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Instituiton:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Country:</span><select name="country">
<option selected>Malaysia</option>
<option>International</option>
</select>
</label>
</p>
<p>
<label><span>Date commenced </span></label><input type="date" name="date_commenced">
</p>
<p>
<label><span>Date completed</span></label><input type="date" name="date_complete">
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</div>
</form>
Make a little change to your css container class i.e. margin left value.
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 15em; <-----Change Value Here
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I have been working for some functionality in checkboxes, but this makes me bit confused when changing the styles of checkbox.
I tried setting the color to the checkbox after clicked, but not worked.
.container input:checked ~ .checkmark:after {
display: block;
color: #000 !important;
}
This seems to be bit easy, but somehow the tickbox color (white) cannot be changed. Can someone help me out?
Here's the code snippet.
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
color: #000 !important;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
The checkmark is being created using a border color, here:
.container .checkmark:after {
border: solid white;
}
So just change that color as desired:
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
If you're trying to change the colour of the tick, you have to change the border colour.
.container input:checked ~ .checkmark:after {
display: block;
border-color: #000;
}
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
border-color: #000;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
I have a long form. Inside there is a color picking radio button
How can I make a css exception for this radio without effecting all other radio's?
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+label span {
transform: scale(1.25);
}
input[type="radio"]:checked+label .red {
border: 2px solid #711313;
}
label {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
cursor: pointer;
}
label:hover span {
transform: scale(1.25);
}
label span {
display: block;
width: 100%;
height: 100%;
transition: transform .2s ease-in-out;
}
label span.red {
background: #DB2828;
}
label span.orange {
background: #F2711C;
}
<div class="radio">
<input type="radio" name="color" id="red" value="red" />
<label for="red"><span class="red"></span></label>
<input type="radio" name="color" id="green" />
<label for="green"><span class="green"></span></label>
<input type="radio" name="color" id="yellow" />
<label for="yellow"><span class="yellow"></span></label>
</div>
You could wrap that entity in a container and specify the class for it.
Below is a sample code from w3schools.
<html>
<style>
/* The container */
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label>Two
<input type="checkbox">
<span class="checkmark"></span>
</label><br/>
<label>Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>
Just add a class called exemption and then allow the CSS to be applied only if the class is present at the top most level, thus your other radio buttons are not affected. I have made the radio button color picker work, please let me know what's missing in this!
.exemption input[type="radio"] {
display: none;
}
.exemption input[type="radio"]:checked+label span {
transform: scale(1.25);
}
.exemption input[type="radio"]:checked+label .red {
border: 2px solid #711313;
}
.exemption input[type="radio"]:checked+label .yellow {
border: 2px solid darkyellow;
}
.exemption input[type="radio"]:checked+label .red {
border: 2px solid darkred;
}
.exemption label {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
cursor: pointer;
}
.exemption label:hover span {
transform: scale(1.25);
}
.exemption label span {
display: block;
width: 100%;
height: 100%;
transition: transform .2s ease-in-out;
}
.exemption label span.red {
background: #DB2828;
}
.exemption label span.green {
background: green;
}
.exemption label span.yellow {
background: yellow;
}
<fieldset>
<div class="radio exemption">
<input type="radio" name="color" id="red" value="red" />
<label for="red"><span class="red"></span></label>
<input type="radio" name="color" id="green" />
<label for="green"><span class="green"></span></label>
<input type="radio" name="color" id="yellow" />
<label for="yellow"><span class="yellow"></span></label>
</div>
</fieldset>
Is there any way to make checkboxes with rounded corners using bootstrap or some css property?
Just using css, however, you lose the checkbox tick.
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: gray;
}
<input type="checkbox" class="checkbox-round" />
.container {
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;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 15px;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
Try to do
body {
background-color: #f1f2f3;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container {
margin: 0 auto;
}
.round {
position: relative;
}
.round label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
.round label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.round input[type="checkbox"] {
visibility: hidden;
}
.round input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.round input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
One of the Best And Easiest Method is to use CSS clip path property:
<input type="checkbox" id="checkbox" />
<label for="checkbox" >Option</label>
input[type="checkbox"] {
width: 45px; /* Set width */
height: 45px; /* Set height */
clip-path: circle(46% at 50% 50%); /* Set the clip path of circle*/
}
if you still see some pointed corners, try reducing the first percentage values, (where I have used 46%), play with it a little bit and it will definitely work.
Well, this is the simplest and optimal solution. You set appearance to none and then use clip-path when its checked.
.rounded-checkbox {
width:35px;
height: 35px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid black;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.rounded-checkbox:checked {
appearance: auto;
clip-path: circle(50% at 50% 50%);
background-color: blue;
}
<input
type="checkbox"
class="rounded-checkbox"
id="checkbox"
/> <label for="checkbox">Checkbox</label>
in css you may play with height, width, border-radius. basically height and width should be equal and border-radius should be half of them.
if you are using bootstrap you can use this class and add it where your shape or in this case your checkbox class is: class="rounded-circle"
look: borders bootstrap 5
for example to make a checkbox rounded in bootstrap 5 (also working for v4):
<div class="form-check">
<input
class="form-check-input rounded-circle"
type="checkbox"
/>
<label class="form-check-label" for="flexCheck1">
rounded checkbox
</label>
</div>
CSS
.checkbox {
clip-path: circle(46% at 50% 50%);
}
HTML
<input type="checkbox" class="checkbox" />
No need to hide the default checkbox and create a custom just set the clip-path and you can easily achieve a circular checkbox.
I thing the best way to make a rounded corners is by using the border-radius property. This site has a nice collection of checkboxes.
For example:
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 10px;
The last line(border-radius: 10px) will give you a checkbox with rounded corners.