Home/ Questions/Q 8228167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:22:25+00:00

am trying to get to this particular image below using pure css3, How it

  • 0

am trying to get to this particular image below using pure css3,
enter image description here

How it works: The app works in such a way that once the toggle button on the page is switched on,check boxes are activated and user can either check or un-check the boxes just like the image below.functional wise, the app is done but am having problem’s getting the CSS aligned so it can look like the image below. kindly refer to this for a working example and my progress so far http://jsfiddle.net/YGeZD/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My only solution for you would be hide the checkbox by setting its opacity to zero, then handle your visual on/off states through a element with a background image, like the following:

    <div class="checkbox_frame">
 <input type="checkbox" value="None" />
 <span class="state"></span>
</div>

    CSS:

    .checkbox_frame {
position: relative;
}

input[type="checkbox"] {
width: 30px; height: 30px;
position: absolute;
opacity: 0;
}

input[type="checkbox"] + .state {
display: block;
width: 30px; 
height: 30px;
background: url('http://i153.photobucket.com/albums/s229/fluffyshuffle/error1.png') center center no-repeat;
}

input[type="checkbox"]:checked + .state {
background: url('http://i153.photobucket.com/albums/s229/fluffyshuffle/tick1.png') center center no-repeat;
}

    ** Revised

    ​

    • 0