CSS Quick-Tip: Positioning checkbox/label

Various browsers is rendering checkbox inputs differently. It can be often seen on the web: in some browsers checkbox positioning works well, meanwhile in others it’s a complete mess.


I came with quite a complex solution for this in my new project. I’m wrapping checkbox element with label. Label is being used as a relatively positioned container, meanwhile checkbox has a position:fixed applied.

HTML:

<label class="checkbox" for="rememberMe">
   <input type="checkbox" name="rememberMe"/> Remember Me
</label>

CSS:

input[type="checkbox"]{
	position:absolute;
	left:0;
	top:0;
	width:auto;
	display:inline-block;
	}

label.checkbox{
	width:180px;
	position:relative;
	padding-left:22px;
	line-height:16px;
	float: left;/* for Opera*/
	}

Happy using, folks! And don’t forget to subscribe to our RSS feed.