A short and sweet piece of code, but very powerful in giving you total control over the design of your checkboxes.

Click here to view the demo.

The problem I set out to solve here was a combination of two things. The first was the ability to change the look of checkboxes in web forms. By default they cannot be altered using CSS as the style is determined by the user’s operating system. The second problem was that the existing JavaScript solutions to this problem were bloated with a lot of unnecessary code.

My solution solves a simple problem using very little code, so I hope it comes in useful! Let me walk you through the steps…

Step 1, add a block container around your checkbox.

<div class="container">
    <input type="checkbox" value="1" class="checkbox" />
</div>

That’s all the HTML you're going to need!

Step 2, style your checked and unchecked states as an image. (It’s a good idea to optimise these as a sprite instead of two separate images to save on HTTP requests and avoid a flicker when the images switch.)

Step 3, add your CSS.

The checkbox image should be added to the checkbox container rather than to the checkbox itself.

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

Add your ‘checked’ class, which should just be a change in the background position if you’ve used a sprite.

.checked {
    background-position:0px -20px !important;
}

Next, we want to position our checkbox so it appears outside of the container.

.checkbox {
    position:relative;
    left:30px;
}

If you have a look at your page now, you should see your custom checkbox and your default checkbox sitting pretty beside each other. Next, we’ll move on to the jQuery.

Step 4, add your jQuery.

The theory behind the idea is for the user to click on the block container and use jQuery to automatically check the checkbox that sits inside it. Then we use CSS to hide the default checkbox.

var $this = $(".container");
$(".container").toggle(function(){
    $this.addClass("checked");
    $(".checkbox").attr("checked","checked");
},function(){
    $this.removeClass("checked");
    $(".checkbox").removeAttr("checked");
});

The toggle function here will allow you to add your checked class as well as check the checkbox itself, and then remove the style and checked attribute on every 2nd click.

If you run this in your browser now and click on the custom checkbox, you should see that the default checkbox is being toggled automagically! If you are seeing this, then all that is left to do is hide your default checkbox using CSS. So in your container class, simply add the following:

overflow:hidden;
position:relative; /* IE fix to hide overflow */

So the whole container class should look like this:

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

I’ve tested this code in Firefox 3, IE6, IE7, IE8, Safari, Chrome and Opera all on Windows and it works fine in all browsers. Have a look at the demo and let me know what you think!

Center A Web Page Layout

One of the most common layout questions asked about when building a website has to be how to create a fixed width layout, with the container floating in the middle of the page. Add the following code to the CSS:

#container
{
width: 700px;
margin: 0 auto;
}

Then add <div id=”container”></div> in the body of your HTML to give an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen.

To quickly see if your container is there simply add:

#container
{
width: 700px;
margin: 0 auto;
height: 200px;
background: red;
}

If a red box appears in the middle of your page, you know the container is sitting in the correct place.
You can then remove the height and background from the CSS for this ID.

Font Shorthand

When styling fonts with CSS you may be doing this:

font-size: 110%;
line-height: 140%;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial,serif;

You can use this CSS shorthand property instead:

font: 110%/140% bold italic small-caps arial,serif

Please Note - This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.

Content Selection Colour

When selecting content on a web page by holding down the left mouse button, your browser makes the selected the content background colour blue and text white. This can be styled but unfortunately doesn’t work in IE, but it's still a nice touch. Add the following to your style sheet and view your site in Firefox.

*::selection
{
background: black;
color: yellow;
}

*::-moz-selection
{
background: black;
color: yellow;
}

Using Two Classes Together

Usually attributes are assigned in just one class, but this doesn't mean that that's all you're allowed. You can assign as many classes as you like!
For example: <p class="left dark”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both ‘left’ and ‘dark’. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

Image Replacement

It's always advisable to use regular HTML mark-up to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

For example, you wanted the top heading of each page to be ‘SEO Tips’, as you're an SEO Blogger and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image: <img src="seo-tips.gif" alt="SEO Tips" />

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be: <div id=”logo”><h1>SEO Tips</h1></div>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

#logo
{
background: url(seo-tips.gif) no-repeat left top;
width: 200px;
height: 50px;
}

#logo h1
{
text-indent: -9999px;
}

The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 9999px to the left of the screen thanks to our CSS rule.

It’s also worth making your H1 a hyperlink: <div id=”logo”><h1><a href="#">SEO Tips</a></h1></div> and adding the following to your CSS:

#logo h1 a
{
display: block;
width: 200px;
height: 50px;
cursor: pointer;
}

Our latest project ‘Eco Environments’ recently went live, which we’re really proud of. So much so, we thought we’d brag about it a little!

We decided to incorporate an energy saving concept by urging site users to turn off the light before they leave.

We added mouse detection to the site in the flash, so when the mouse cursor went above the top navigation towards the top of the browser, a warning sign appears.

For the actual light switch we used jQuery. Clicking the light switch switches the CSS Style Sheets, giving the impression the lights have been switched off. Highlighting only the data capture form for their latest email campaign.

You’ll also noticed the flash at the top also changes from day to night, with house lights flickering on and the sun changing to a moon.

Of course you can always switch the lights back on... if you’re afraid of the dark!

A collection of our favourite CSS Gallery Websites!
What's your favourite CSS Website?

Here’s a cool little CSS 3 trick for hiding messages within your text. We’re going to be using the ::selection declaration to change the colour of the text on selection. The ::selection declaration is a new tool used in CSS 3, but currently isn’t supported by Internet Explorer. The idea is that you can change the default blue colour when you select text on a web page. It’s very easy to implement:

p::selection { background: #f00; }
p::-moz-selection { background: #f00; }

The ::-moz-selection is for Firefox support, so you should always remember to use both. The code above will change the background colour to red when you select any paragraphs on the page. So how can we use this for hidden messages? Easy. Simply change the font colour and the text colour to be the same for the non-important text and use contrasting colours for the words that you do want to show. To distinguish the hidden words, wrap them in a <span> tag. For example:

<p>These are the words I want to hide.
<span>And these are the words I want to show</span></p>

p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }

You can see this method being used on our demo page here. Just highlight all of the text to reveal the hidden message!