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;
}
}
Related
I'm trying to get the behavior of <input type="search"> on regular <input type="text">.
I tried to use the appearance: searchfield; which didn't applied this special behavior.
How I want it to look:
CodePen Example (Tested on Chrome Browser, and it doesn't work)
Searching for a pure CSS/HTML solution
Demo: https://codepen.io/vsync/pen/MWjdbgL
Presented here three ways of solving the issue:
1️⃣ When the input element has no focus, its type is set to search, which then shows the x (clear button), and when the element has focus - its type is set to text
<input type="search"
onmouseup="this._timer=setTimeout(el=>{el.type='text'},0,this)"
onblur="clearTimeout(this._timer);this.type='search'"
/>
2️⃣ Wrap the input with a <form> element so it could be cleared using native <button type='clear'>
input{ padding:.5em; font:1em Arial;}
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}
form{ display:inline-block; position: relative; }
form:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
form button{
--size: 18px;
position: absolute;
border: none;
display: block;
width: var(--size);
height: var(--size);
line-height: var(--size);
font-size: calc(var(--size) - 3px);
border-radius: 50%;
top: 0;
bottom: 0;
right: calc(var(--size)/2);
margin: auto;
background-color: salmon;
color: white;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
transition: .1s;
}
<form>
<input type='text' placeholder=' ' />
<button type='reset'>×</button>
</form>
3️⃣ Use a non-<form> wrapper and javascript
input{ padding:.5em; font:1em Arial; }
input[type='text']:placeholder-shown + button{ opacity:0; pointer-events:none;}
.inputWrap{ display:inline-block; position: relative; }
.inputWrap:hover input[type='text']:not(:placeholder-shown) + button{ opacity: 1 }
.inputWrap button{
--size: 18px;
position: absolute;
border: none;
display: block;
width: var(--size);
height: var(--size);
line-height: var(--size);
font-size: calc(var(--size) - 3px);
border-radius: 50%;
top: 0;
bottom: 0;
right: calc(var(--size)/2);
margin: auto;
background-color: salmon;
color: white;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
transition: .1s;
}
<div class='inputWrap'>
<input type='text' placeholder=' ' />
<button type='reset' onclick='this.previousElementSibling.value=""'>×</button>
</div>
<html>
<head>
<style>
.border-0{
border: none;
}
.search-border{
border: 1px solid;
border-radius: 5px;
width: 200px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="search-border">
<input type="text" placeholder="Search" class="border-0">
<img src="/assets/close-icon-light.svg">
</div>
</body>
</html>
Hi,
Please try this code if this satisfies you. Use width of your choice for the search box. Also use a suitable close icon.
I found some code that creates a slider, but I can't seem to get the movement to occur when the input is clicked on. It's actually not doing anything when activated. I'm using SASS as my preprocessor. I'm able to see the switch on the screen, but when I click to activate the slide feature, nothing happens.
HTML
<div className='prefilloptions_container'>
<div className='prefilloptions'>
<label>Defaults</label>
<input type='checkbox' name='default' value='yes' />
<span className='slider round' />
</div>
</div>
SCSS
.prefilloptions_container {
display: flex;
justify-content: center;
width: 100%;
.prefilloptions {
width: 5vw;
height: auto;
position: relative;
display: inline-block;
& input {
opacity: 0;
width: 0;
height: 0;
&:checked {
background-color: #2196f3;
}
&:focus {
box-shadow: 0 0 1px #2196f3;
}
}
label {
margin-right: 0.5vw;
}
input:checked + .slider {
background-color: #2196f3;
}
input:checked + .slider::before {
transform: translateX(26px);
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
.slider {
position: absolute;
cursor: pointer;
top: -3px;
left: 70px;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
width: 2vw;
height: 1.7vh;
&::before {
position: absolute;
content: '';
height: 15px;
width: 15px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
}
&.round {
border-radius: 34px;
width: 1.7vw;
&::before {
border-radius: 50%;
}
}
}
}
}
Looks like I was able to figure this out. Apparently, I needed to surround the input and span elements with label element rather than having the label element on it's own line.
Old Code
<div className='prefilloptions_container'>
<div className='prefilloptions'>
<label>Defaults</label>
<input type='checkbox' />
<span className='slider round' onClick={alertMe} />
</div>
</div>
New Code
<div className='prefilloptions_container'>
<div className='prefilloptions'>
<label>
Defaults
<input type='checkbox' />
<span className='slider round' onClick={alertMe} />
</label>
</div>
</div>
Mabye this HTML-slider will help you:
<input type="range" min="1" max="100" value="50">
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 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