I am trying to implement this functionality, but when I click on checkbox (the checkbox is checked) then the checkbox doesn't change its background image and remaining as before.
How I am trying to do that:
<div class="checkbox">
<input class="car_checkbox" type="checkbox" value="1">
<span class="private_zip"></span>
</div>
and CSS:
input[type="checkbox"] {
opacity:0;
height: 18px;
width: 18px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
input[type="checkbox"] + span.private_zip {
width: 18px;
height: 18px;
display: inline-block;
background: url("checkbox.png") no-repeat;
}
input[type="checkbox"]:checked + span.private_zip {
width: 18px;
height: 18px;
display: inline-block;
background: url("checkbox_check.png") no-repeat;
}
Why the image is not switched once is the checkbox clicked?
Thank you
The last bit of your CSS should be:
input[type="checkbox"]:checked {
width: 18px;
height: 18px;
display: inline-block;
background: url("checkbox_check.png") no-repeat;
}
Remove the + span.private_zip part.
Read this
https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
UI element state pseudo-classes section
I hope this will help
Related
I've tried to simplify my problem into the below:
.wrapper {
position: relative;
display: inline-flex;
min-height: 1.5rem;
border: 1px solid black;
margin-right: 1rem;
padding-right: 1.5rem;
}
.input {
position: absolute;
z-index: -1;
opactiy: 0;
}
.label-wrapper {
margin-left: 2rem;
}
.label {
position: relative;
margin-bottom: 0;
}
.label:before {
position: absolute;
top: 4px;
left: -24px;
display: block;
width: 20px;
height: 20px;
pointer-events: none;
content: "";
background-color: #fff;
}
.label:after {
position: absolute;
top: 4px;
left: -24px;
display: block;
height: 40px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
<div class="wrapper">
<input class="input" type="checkbox"></input>
<label class="label">
<div class="label-wrapper">
Option 1
</div>
</label>
</div>
In addition to this, I have the following CSS (in a StyledComponent) that adds a "check" to the checkbox when the user clicks on the hidden input in the .input:
&[type="checkbox"]:checked ~ label::after {
background-image: url("${checkboxImage}");
top: -2px;
left: -29px;
width: 30px;
height: 30px;
}
This means it behaves as a checkbox should - however, I want to swap my elements around so that the checkbox sits to the right of the text instead of the left, to do this I have tried re-ordering the input so that it comes after the label but then the hidden input (which is handling the actual click behaviour is disjointed from the CSS checkbox? Can anyone point me in the direction of how I might resolve this?
Summary:
Using :before & :after to create a visual checkbox, but the logic for that checkbox is actually handled by input (which is hidden) - how can I move both the visual & hidden input to the right of the text?
Edit:
Its very simple with display: flex and flex-direction: row-reverse.
.label-wrapper {
margin-left: 24px;
margin-right: 0;
flex-grow: 1; /* ADDED THIS */
}
.label {
position: relative;
margin-bottom: 0;
display:flex;
flex-direction: row;
flex: 1; /* ADDED THIS */
}
.label.reverse{
flex-direction: row-reverse;
}
See the Snippet below:
.wrapper {
position: relative;
display: inline-flex;
min-height: 1.5rem;
border: 1px solid black;
margin-right: 1rem;
padding: 0.5rem;
width: 200px;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
margin-left: 24px;
margin-right: 0;
flex-grow: 1;
}
.label.reverse > .label-wrapper {
margin-left: 0;
margin-right: 24px;
}
.label {
position: relative;
margin-bottom: 0;
display:flex;
flex-direction: row;
flex: 1;
}
.label.reverse{
flex-direction: row-reverse;
}
.label:before {
position:absolute;
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius:4px;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked ~ .label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
}
<div class="wrapper">
<input class="input input1" name="checkbox1" id="checkbox1" type="checkbox">
<label class="label" for="checkbox1">
<div class="label-wrapper">
Option 1
</div>
</label>
</div>
<div class="wrapper">
<input class="input input2" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label reverse" for="checkbox2">
<div class="label-wrapper">
Option 2
</div>
</label>
</div>
Are you trying to change the left to right default position of elements?
If that's the case you can use text-align or float. Or even flexbox.
Also, put the text inside a span or something so you can control it.
If I have understood you correctly, there are many ways based on context like using absolute positioning, or put the label before input and close it. or something like this:
<label class="">
<span class="">text</span>
<input class="" type="checkbox" name="order">
</label>
I want to customize the browser checkbox. When the status is checked, the icon checked.svg should be displayed instead of checkbox and the icon unchecked.svg otherwise.
Here is my code.
HTML:
<div class="checkbox-custom">
<input type="checkbox"/>
<div class="checkmark">
<img src="#/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
<img src="#/assets/images/icons/checkbox/checked.svg" class="checked"/>
</div>
</div>
SASS:
.checkbox-custom {
position: absolute;
width: 28px;
height: 28px;
left: 0;
top: 0;
// Hide default browser checkbox
input[type=checkbox] {
display: none;
}
input[type=checkbox] + .checkmark {
position: absolute;
left: 3.5px;
top: 3.5px;
right: 3.5px;
bottom: 3.5px;
display: inline-block;
cursor: pointer;
img {
width: 21px;
height: 21px;
}
.checked {
display: none;
}
}
input[type=checkbox]:checked + .checkmark {
.checked {
display: block;
}
.unchecked {
display: none;
}
}
}
When i click on the checkbox, nothing happens. What could be the error?
This can be accomplished without any javascript. Clicking the label element toggles the checkbox inside of it, so with some clever css, we can change the display based on the input's checked state.
input[type=checkbox] {
display: none;
}
.label {
border: 1px solid #000;
display: inline-block;
padding: 3px;
/* background: url("unchecked.png") no-repeat left center; */
/* padding-left: 15px; */
}
input[type=checkbox]:checked + .label {
background: #f00;
color: #fff;
/* background-image: url("checked.png"); */
}
<label><input type="checkbox"><span class="label">Check me</span></label>
Change the .label styles to use background-image of your choice (and position it to the left of your text).
http://jsfiddle.net/pKM3x/
CSS:
.checkbox{
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
HTML:
<div class="checkbox">
</div>
JQUERY:
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
This also possible to do with pure JS.
I am new to html and css and i am working on a project where i want to use custom check boxes.
I am trying to hide a check-box with an image via css. I dont want to re-write the html if i dont have to. Ive got my image to cover the check box using (display:none; )but this has also disabled my check box. Is there a way to make my check-box usable without displaying?
input[type='checkbox']
{
display: none;
}
input[type='checkbox'] + label
{
background: url('/Pictures/checkbox_unchecked.jpg')no-repeat;
height: 30px;
width: 30px;
background-size: 100%;
display:inline-block;
padding: 0 0 0 0px;
}
input[type='checkbox']:checked + label
{
background: url('Pictures/checkbox_checked.jpg') no-repeat;
height: 50px;
width: 200px;
background-size: 100%;
display:inline-block;
padding: 0 0 0 0px;
}
You can set the opacity of the checkbox to 0. This still makes it clickable.
Example (click inside the black rectangle):
#checkbox {
opacity: 0;
}
#container {
border: 2px solid black;
width: 20px;;
}
<div id="container">
<input type="checkbox" id="checkbox" onclick="alert('hello')"/>
</div>
label input {
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
label span.y {
display: none;
}
label span.n {
display: inline;
}
label input:checked ~span.y {
display: inline;
}
label input:checked ~span.n {
display: none;
}
<label>
<input type="checkbox" value="1">
<span class="y">Checked!</span>
<span class="n">Click me!</span>
</label>
Just change span.y and span.n. to your elements (images or something else).
input[type='checkbox'] {
display: block;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
input[type='checkbox'] + label {
background: url('http://lorempixel.com/30/30/') no-repeat;
height: 30px;
width: 30px;
background-size: cover;
display: inline-block;
}
input[type='checkbox']:checked + label {
background: url('http://lorempixel.com/50/200/') no-repeat;
height: 50px;
width: 200px;
background-size: cover;
display: inline-block;
}
<input type="checkbox" id="check" />
<label for="check"></label>
Im im trying to create custom checkboxes in GWT using only CSS
So far i was able to style checkboxes that DO NOT have text near them.
However checkboxes with text are looking messy
Current state:
Desired behaviour:
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
HTML
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
CSS
Any help would be appreciated
EDIT:
fiddle provided
https://jsfiddle.net/2j0zke2z/
It solves all problems: (you can set higher padding if you want)
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif);
background-repeat: no-repeat;
}
input[type="checkbox"]:checked+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif);
background-repeat: no-repeat;
}
This is what you are looking for, just change images, cus I took some by default:
span {
margin-right: 10px;
}
input[type="checkbox"] +
label span {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAUVBMVEX///8zMzMwMDBEREQqKiotLS3s7OwnJydcXFxJSUkkJCRDQ0P19fVhYWGZmZnd3d1VVVWvr684ODjFxcWKiopvb2+7u7t1dXX5+flpaWnW1ta78F6SAAABiElEQVRoge2ay5aDIBBEG3kp+EDxmf//0JkMYJwzZpERe9W1Mwtuym6OiyqAg2rlx8lZdlHWTaNXNZxLzctghCyuUhgrpDDDMqszyjxJkQGxo4Sc5j+QdRtkPkaQHLb1N+XBdUYnSYXmjyPFV9mtBMnKH7xU4vgfLutwmKh2PyvfvUihDbP8kiwzWrxO5Gk+m04/sabt3qz7R+rahiWQ3uImD9GlcP27O/Wx6t7FQRTDz16rKXJ1mcVJUlfGlySn5z2dI0WUp7f2/1Jl9CO/7dRLeJAuq5enOhcciKUGlSbT56YA9Gk6CrwJZpps03+pboId42EM70y0+SkAbTx8hLhnOvtknup03DVwYTTmDgpAmEjhIHwrC3YPhgUTFuIy2HswNq5xwvB7MJwwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEAYPc3ewghQTIYVeSBEeUiCJFK8ihcVI0TdSkI9VS0AqWWBVRrAKMEh1HqxyElbVCqs4Bkg1OMAq9cGdFcUvpGkd5VrzEsoAAAAASUVORK5CYII=');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
vertical-align: middle;
margin-top: -5px;
}
input[type="checkbox"]:checked + label span {
background: transparent;
}
input[type="checkbox"]:checked + label span::before {
content: "";
background-image: url('https://cdn4.iconfinder.com/data/icons/customicondesignoffice2/128/success.png');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3"><span></span>Run task immediately after finish</label>
CSS :
input[type="checkbox"]+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
Does you really want width of 16px only, If you keep it auto it will solve your problem.
Please check this fiddle Link provided here.
Text has been wrapped due to specified width.
Just remove the width and add padding-left as necessary. Also include no-repeat to your background image. Updated fiddle
Note: You can resize the background image using background-size
Snippet
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
cursor: pointer;
padding-left: 20px;
display: inline-block;
height: 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) no-repeat;
}
input[type="checkbox"]:checked+label {
padding-left: 20px;
display: inline-block;
height: 16px;
/* background: transparent; */
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) no-repeat;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
Add Padding-left:20px to your label and remove the width and height form label. Also include no-repeat to your background image.
input[type="checkbox"]+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) 0 0 no-repeat;
padding-left:20px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) -64px 0 no-repeat;
}
Updated fiddle : https://jsfiddle.net/2j0zke2z/2/
Edited :
is this you want?
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) 0 0;
background-repeat:no-repeat;
padding-left:25px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) 0px 0px;
background-repeat:no-repeat;
padding-left:25px;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
I am trying to change the default 'box image' of the checkbox with CSS, but it is not working. Is there any way around this?
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
<input type="checkbox" class="class_checkbox">
You can use pure css, just add a label to the checkbox like this:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Example HTML:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
Try:
<input type="checkbox" class="input_class_checkbox">
jQuery
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
Fiddle:
http://jsfiddle.net/cn6kn/
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
.class_checkbox {
width: 20px;
height: 20px;
background-color: red;
}
.class_checkbox.checked {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">
I created a Fiddle using pure CSS.
The most voted answer doesn't handle click events and won't work well, because the checkbox value won't change.
This is my example:
http://jsfiddle.net/kEHGN/1/
Basically, we need the following html:
<div class="checkbox_wrapper">
<input type="checkbox" />
<label></label>
</div>
And the following CSS:
.checkbox_wrapper{
position: relative;
height: 16px;
width: 17px;
}
input[type="checkbox"] {
opacity:0;
height: 16px;
width: 17px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
input[type="checkbox"] + label{
background:url('../images/unchecked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input[type="checkbox"]:checked + label{
background:url('../images/checked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}
Just check the routes of the images, and the widths and heights should be equal to the width and height of the images.
On the fiddler I am using base64 encoded images.
I hope it can be useful.
I found another way, without using adjacent labels or surrounding divs.
My usecase was that I had a markdown parser that generates those nifty TODO lists and I wanted to style them. Changing the generated HTML wasn't a option, so I came up with this solution:
given a checkbox like this:
<input type="checkbox" id="cb">
You can style it with visibility: hidden on checkbox and visibility: visible on ::after, like this:
#cb {
visibility: hidden;
}
input#cb::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<input type="checkbox" id="cb">
</body>
</html>
EDIT:
#connexo in a comment pointed out that input elements cannot have content. It could be easly done using label element, for example like so (please someone correct me if this is wrong, I don't have non-webkit browser handy to test it).
#cb-span * {
visibility: hidden;
}
input#cb + label::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked + label::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<span id="cb-span">
<input type="checkbox" id="cb">
<label for="cb"></label>
</span>
</body>
</html>
The checkbox works just like normal one and you can style it anyway you like.
Maybe it'll help someody (and I can bookmark it, because I haven't found anything like this on the web)
Maybe will be useful my sample with LESS.
<div class="custom-checkbox">
<input component="input" type="checkbox"/>
<label>Here is caption right to checkbox</label>
</div>
#imgsize: 25px;
.custom-checkbox{
position: relative;
> input[type="checkbox"] {
display:none;
position: absolute;
top: 0;
left: 0;
+ label{
background:url('../img/unchecked.png') no-repeat 0 0;
background-size:#imgsize;
height: #imgsize;
padding: 4px 0 5px 35px;
display: inline-block;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
}
> input[type="checkbox"]:checked + label{
background:url('../img/checked.png') no-repeat;
background-size:#imgsize #imgsize;
}
}