Home/ Questions/Q 6984283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:31:46+00:00

I would like to show checkbox as toggle button. But I can’t apply my

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0