Custom styled checkboxes

Bored of the good old checkbox design?
Time for styling checkbox elements, giving custom design to checkboxes.

custom-styled-checkboxes
First of all, here’s the demo link

What are we doing?

Basically i want to replace this with this

So here’s one way(hack) to do it. Hide the default checkbox, instead use background images for the associated label. Use different images for checked/unchecked state of the checbox. We are not removing the checkboxes completely, those are there, just hidden by css with display:none. So clicking on the associated label does cause checking/unchecking of the checkbox, so its still available in forms post data, no issues there.

The HTML

standard checkbox html with labels, nothing fancy here

<ul class="customChList lstn">
	<li><input type="checkbox" value="1" id="chk1"/><label for="chk1">One - lorem psum </label></li>
	<li><input type="checkbox" value="2" id="chk2"/><label for="chk2">Two - lorem psum </label></li>
	<li><input type="checkbox" value="3" id="chk3"/><label for="chk3">Three - lorem psum </label></li>
	<li><input type="checkbox" value="4" id="chk4"/><label for="chk4">Four - lorem psum </label></li>
	<li><input type="checkbox" value="5" id="chk5"/><label for="chk5">Five - lorem psum </label></li>
</ul>

I’ve wrapped those checkboxes in ul li just for the purpose of applying one single css rule to all of them. You can use any way you want.

The CSS

Here’s the trick:
We’ll hide the checkboxes, toggle the background image of associated label with css and js. I’ve used this image . 3 states – normal, hover, checked.

.customChList li input[type='checkbox']{
	display:none;
}
.customChList li label{
	font-size: 18px;
	padding-left:35px;
	background: url(images/custom-checkbox.png) no-repeat;
}

.customChList li label:hover{
	background-position: 0px -32px;
}

.customChList li label.checked{
	background-position: 0px -64px;
}

A little javascript

Now when user clicks with the intention to check/uncheck the checkbox, we show it visually by adding/removing a css class of ‘checked’. So a simple change event:

$(document).ready(function(){
	$(".customChList input[type='checkbox']").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").removeClass('hover').addClass('checked');
		}
		else{
			$(this).next("label").removeClass('checked');
		}
	});
});

We can use css3 adjacent selector in place of the above javascript.

So instead of the above javascript, the following css will also work:

.customChList li input[type='checkbox']:checked ~ label{
	background-position: 0px -64px;
}

This essentially does the same thing. But, as usual, it won’t work in IE, so lets just go with javascript.

That’s it in here. Hope you find it useful


resizable background image

Many a times you want to prevent background image resizing on browser zoom in zoom out or keeping background image constant even if user zooms in / zooms out.

Many a times its required that the background image should take up full width height of the page and should not get cropped or repeated if the window size is less/decreased or more/increased respectively.

Using css background porperty one can’t possibly achieve that. So here’s a workaround. We take the big background image as an <img> element rather than setting it as the background of <body> or something.

<body>
<img src="wdw_bg.png" id="background"/>
<div class="centerContent">
<div class="inPadd opaque">
.. your content here...
</div>
</div>
</body>

and the CSS

#background{
	position:fixed; top:0px; left:0px;
	z-index:-100;
	width:100%;
	height:100%;
}

Setting height and width to 100% makes the image take up entire space. Negative z-index send it behind everything else, making it look like background. Position fixed prevents any empty background space if page content increases and scrollbars appear.
Check the demo (link provided at the end of article).
– the background image resizes according to browser size when you increase or decrease the borwser window’s size.
– the background image remains in original size even if you zoom in or zoom out


contain original width even after padding

What is it

its a common problem that many new-by web-designers come across with. You have a div of predefined width which you don’t wanna change, and now you want to give the <div> some padding so that the content looks better visually. The moment you give and padding to the <div> its width increases and breaks your design !!.
Lets say you have a container <div> of width 600px and you want to float 3 div’s of equal width in there. So you set each inner <div> a width of 200px. so far so good, its working. But you see all the 3 inner <div> have no space between them and you go to set a margin to separate them a bit. You give the inner div’s a margin of 10px each and to compensate you reduce their width to 180px. Phew !! it was hard but it worked..

Again now you want to give some padding to the div’s. You give them a padding of 10px and your design breaks again !!!

Reason

padding increases the width of the container. Normally in the beginning we think (and that’s how it should be i think) that padding wont affect the outer width, instead it will leave space inside the border and the content will get less space to fit in. But actually what happens is that the space inside remains same and total width increase to accommodate for padding space. So a <div> with width 100px on giving a padding of 10px actually becomes 100+(10*2) = 120px wide.

The solution

Its rather easier than you think it would be. Add another <div> inside your content <div> and give the inner <div> a padding of 10px, then wrap all your content inside the inner <div>
so originally if i had my markup as

<div class="container">lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>

the css →→ .container{width:100px}
I’ll change it to something like

<div class="container">
<div class="inPadd">lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
</div>

extra css →→ .inPadd{padding:10px}

That does the trick for you. So wherever you want some padding you just wrap around the content in a <div> with class ‘inPadd’ and it wont affect the width of your outer container.

Hope it helps…