I want to add indeterminate state in my custom checkbox.
True
False
[-] <-- I want to have [-] value for indeterminate state when user clicks it third time
Here code
/* 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);
}
<html>
<body>
<h1>Custom Checkbox</h1>
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</body>
</html>
Regular checkbox is not capable of doing it. You need to use a flag for this. What I would do is to use a counter flag, that is tied to the element:
$(function () {
$(".check").data("state", 0).addClass("unchecked");
$(".multi-checkbox").click(function () {
var states = ["unchecked", "partial", "checked"];
var curState = $(this).find(".check").data("state");
curState++;
$(this).find(".check").removeClass("unchecked partial checked").addClass(states[curState % states.length]).data("state", curState % states.length);
});
});
.multi-checkbox .check {display: inline-block; vertical-align: top; width: 15px; height: 15px; border: 1px solid #333; margin: 3px;}
.multi-checkbox .check.unchecked {background: #fff;}
.multi-checkbox .check.partial {background: #ccc;}
.multi-checkbox .check.checked {background: #000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multi-checkbox">
<span class="check"></span>
Check me
</div>
I just wrote this snippet for this answer. Let me know if you have any questions. With font awesome, we can do it in a better way.
Related
This is my HTML page for selecting product condition using radio button. When user check New or used button I fetch New product or Used product:
<div>
<h5><b>Condition</b></h5>
<label class="container">New
<input (click)="onCondition('New')" type="radio" name="radio" >
<span class="checkmark"></span>
</label>
<label class="container">Used
<input (click)="onCondition('Used')" type="radio" name="radio" >
<span class="checkmark"></span>
</label>
</div>
This is my CSS for Radio button:
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 15px;
-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);
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
This is the TypeScript function where I want to reset or unchecked all the radio button when this function gets executed. I want to able to uncheck the radio button to default:
/**
* Get current categories
* #param categoryId
*/
getCurrentCategories(categoryId: number) {
this.currentCategories = categoryId;
}
Try giving an id='radio' atribute and then give document.getElementById('radio').checked = false
I have a checkbox code which I want to move the label from the right to the left while maintaining it's design
.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);
}
<label class="container" style="color:#000 !important;">Select All
<input type="checkbox" name="select-all" id="select-all" />
<span class="checkmark"></span>
</label><br>
The result I expect is that the label is aligned to the left of the checkbox. Please help, how do I get this done?
.container selector must to be display:inline-block,padding-left change it by padding-right
.checkmark change left by right
the result is
.container {
display: inline-block;
position: relative;
padding-right: 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;
right: 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);
}
<label class="container" style="color:#000 !important;">Select All
<input type="checkbox" name="select-all" id="select-all" />
<span class="checkmark"></span>
</label><br>
Hello Stackoverflow Team,
I want to insert custom checkmarks and can not use Javascript. I can't seem to make my custom checkmark show.
I am not sure how to link the two divs under the class form-group together. Or if this is even possible. Sadly I can not change any HTML or use Javascript.
/* Show the checkmark when checked */
.form-group input:checked~.form-group .checkmark:after {
display: block;
}
This part is the essential part, I am having trouble with.
No Javascript, no HTML changes, only CSS possible.
I think the code speaks for itself.
/* The container */
.checkbox {
cursor: pointer;
font-size: 14px;
top: 32px;
left: 5px;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.help-block {
margin-left: 30px;
}
/* Hide the browser's default checkbox */
.checkbox input {
position: absolute;
top: 25px;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 37px;
left: 20px;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 4px;
}
/* On mouse-over, add a grey background color */
.form-group:hover input~.form-group .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a background */
.form-group input:checked~.form-group .checkmark {
background-color: #DF606C;
}
.noble .form-group input:checked~.form-group .checkmark {
background-color: #005144;
}
.sporty .form-group input:checked~.form-group .checkmark {
background-color: #E5AC4C;
}
.candy .form-group input:checked~.form-group .checkmark {
background-color: #7CC5B6;
}
.lake .form-group input:checked~.form-group .checkmark {
background-color: #498BA6;
}
.natural .form-group input:checked~.form-group .checkmark {
background-color: #987247;
}
.bluesky .form-group input:checked~.form-group .checkmark {
background-color: #00ADCC;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.form-group input:checked~.form-group .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="row planyo-form-row-wrapper">
<div class="form-group planyo-form-item-group col-sm-12" id="row_rental_prop_AGB_UG">
<div class="checkbox "><label for="rental_prop_AGB_UG" class="with-status-border chk_label"><input type="checkbox" id="rental_prop_AGB_UG" name="rental_prop_AGB_UG" onclick="js_dates_changed();" onchange="js_dates_changed();"> AGB UG<em>*</em></label></div>
<div class="help-block">Ja, ich stimme den Datenschutzbestimmungen vom Parkour Creation e.V zu. <span class="checkmark"></span></div>
</div>
</div>
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>
Can anyone help me with this code so that when the checkbox is checked, the text has a strikethrough as well?
I can get either the strikethrough to work, or the css styling, but I cannot get both to work at the same time :(
I've tried to combine the code below with the code in the link, but I can't figure out what I'm doing wrong.
CSS checkbox strikethrough Demo
/* Customize the label (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);
}
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
you can do this simply using pseudo elements ::before and ::after with text-decoration: line-through
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default checkbox */
.container input {
display: none
}
/* Create a custom checkbox - using ::before */
.checkmark::before {
content: "";
height: 25px;
width: 25px;
background-color: #eee;
position: absolute;
left:0;
top:0;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark::before {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark::before {
background-color: #2196F3;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
}
/* strike throught the text */
.container input:checked~.checkmark {
text-decoration: line-through
}
<label class="container">
<input type="checkbox">
<span class="checkmark">Two</span>
</label>
As you have both the checkbox and the text inside the label (contrary to the example you are referencing where the label comes after the checkbox) you will have to rearrange your markup slightly.
The text you want to modify has to come after the checkbox for the sibling selectors to work (+ or ~), and (as CSS cannot select parent elements) the text has to be inside its own element.
I suggest you put it inside its own span named .text:
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<span class="text">Two</span>
</label>
You can then select the text when it is the sibling of a checked checkbox using the following:
.container input:checked ~ .text {
text-decoration: line-through;
}
Putting this into your code we get the following:
/* This is our new part*/
.container input:checked ~ .text {
text-decoration: line-through;
}
/* Customize the label (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);
}
.container input:checked ~ .checkmark:after {
display: block;
}
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<span class="text">Two</span>
</label>
So first create a label that text inside you want to cross, add it after checkbox and add this to css:
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
/* Customize the label (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);
}
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
<label class="container">
<input type="checkbox"><label> Cross me </label>
<span class="checkmark"></span>
</label>