Menu
I would like to show checkbox as toggle button. But I can't apply my custom pictures to it with CCS -- still checkbox is drawn. How to accomlish this task?
My CSS:
input[type=checkbox]#settingsbutton {
border-style: none;
background-color: transparent;
width: 42px;
height: 40px;
display: block;
}
input[type=checkbox].button-settings {
background-image: url("images/button-settings-normal.png");
}
input[type=checkbox].button-settings:active {
background-image: url("images/button-settings-normal.png");
}
input[type=checkbox].button-settings:hover {
background-image: url("images/button-settings-hover.png");
}
input[type=checkbox].button-settings:active {
background-image: url("images/button-settings-pressed.png");
}
My HTML:
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
</body>
697
To have custom styles for input checkbox you must create input checkbox with id attribute and label with for attribute (for must point on input's ID). You need two images for your new styled checkbox. One image is for unchecked and second for checked state.
We start by hiding the default appearance of the checkbox. Next, we use the after pseudo-element to display an unchecked and checked icon. This gives an illusion of a custom checkbox. We then add custom width to the image to fit the container and set the cursor to the pointer.
If you want it's with pure css solution then you have to add label in your markup . It's a trick & write lke this:
input[type=checkbox]{
display:none;
}
input[type=checkbox] + label{
height: 40px;
width: 42px;
}
body:not(#foo) input[type=checkbox]:checked + label{
background-image: url("images/button-settings-normal.png");
}
body:not(#foo) input[type=checkbox] + label{
background-position:0 -46px; /* as per your requirement*/
height: 40px;
}
HTML
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>
</body>
Read these articles :
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
But it's not work in IE8 & below
91
See this link for styling check-boxes: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The solution involves hiding the check-box and adding a styled element in place of it, which emulates the check-box's behavior.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
