Change Checkbox background color when checked
No need for padding here. Just use display: inline-block;
on :after
, apply width
and height
, and also apply a smooth transition. Also you don't need that extra <div>
.
.checkbox { margin: 0 0 1em 2em;}.checkbox .tag { color: #595959; display: block; float: left; font-weight: bold; position: relative; width: 120px;}.checkbox label { display: inline;}.checkbox .input-assumpte { display: none;}.input-assumpte + label:after { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); display: inline-block; transition-duration: 0.3s; width: 16px; height: 16px; content: ''; margin-left: 10px;}.input-assumpte:checked + label:after { background-color: #595959;}
<div class="checkbox"> <input type="checkbox" class="input-assumpte" id="input-confidencial" /> <label for="input-confidencial">Confidencial</label></div>
Checkbox CSS cannot change background color for the checkbox
You can't modify checkbox color.
Instead, create pseudo elements with background custom background color, like this :
.form-check {
position: relative;
}
input[type=checkbox] {
width: 20px;
height: 20px;
}
input[type=checkbox]:checked+label::before {
content: "";
display: block;
position: absolute;
text-align: center;
height: 20px;
width: 20px;
left: 0;
top: 5px;
background-color: #FA9E57;
font-family: "Montserrat";
border-radius: 2px;
border: 1px solid rgb(150 150 150 / 30%);
}
input[type=checkbox]:checked+label::after {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
display: block;
position: absolute;
left: 3px;
top: 3px;
}
<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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="register.css">
<div class="form-group my-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="privacy">
<label class="form-check-label ml-3" for="privacy">
Agree privacy
</label>
</div>
</div>
Input checked change body background colour using JS
You can try to check for a change in the checkbox, then set the background color and text color accordingly.
document.getElementById("nightmode").addEventListener("change", function() { if (document.getElementById("nightmode").checked == true) { document.documentElement.setAttribute("style", "background-color: black;"); document.getElementsByTagName("body")[0].setAttribute("style", "color: white;");
} else { document.documentElement.setAttribute("style", "background-color: white;"); document.getElementsByTagName("body")[0].setAttribute("style", "color: black;"); }});
<input id="nightmode" type="checkbox">Activate night mode<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
How to change checkbox background color in simple HTML
You can't style the browser's default checkbox, so we have to hide it and create a custom checkbox like so:
.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: 20px;
width: 20px;
background-color: #fff;
border: 2px black solid;
}
/* 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: #002B4E;
}
/* 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: 6px;
top: 3px;
width: 5px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
Change background color of the checkbox which looks like a button when checked
You need to put your input outside the label as a sibling (since we will use the Adjacent sibling combinator ) and use the "for" attributer
.checkboxes{
cursor: pointer;
z-index: 90;
text-align: center;
font-family: "Arial";
font-weight: bold;
font-size: 16px;
color: #235988;
width: 270px;
margin: 5px;
border-radius: 0px !important;
border: 1px solid #235988 !important;
padding-bottom: 5px;
}
.checkboxes:hover,
.form-check input[type="checkbox"]:checked + label{
background: #235988;
color: #FFF;
}
.form-check input[type="checkbox"] {
opacity: 0;
}
<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
<div class="col-md-7">
<input id="checkbox-1" type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >
<label class="btn btn-default checkboxes" for="checkbox-1">
Checkbox1
</label>
<input id="checkbox-2" type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >
<label class="btn btn-default checkboxes" for="checkbox-2">
Checkbox2
</label>
<input id="checkbox-3" type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >
<label class="btn btn-default checkboxes" for="checkbox-3">
Checkbox3
</label>
</div>
Related Topics
How to Open a Link in New Tab Using Angular
Force HTML Content to Fit in Device Width With Wkwebview
Google Chrome Does Not Autoplay Html5 Video on Mobile
How to Clear Input Field After Submitting Data in Angular
How to Put Arrow Between Two Divs Using HTML and CSS
How to Use CSS to Show on Hover Tool-Tips Using the Same Text Which Is Shortend With Ellipses
How to Remove the Space Between Inline/Inline-Block Elements
How to Make a Div Not Larger Than Its Contents
Two Divs Side by Side - Fluid Display
Vertically Centering a Div Inside Another Div
How to Make Space Between Two Buttons in Same Div
How to Reuse a Navigation Bar on Multiple Pages
How to Make All Images of Different Height and Width the Same Via CSS
Splitting the HTML Page Using Div
Large File Upload Though HTML Form (More Than 2 Gb)