Checkboxes are kind of the most boring elements on a web page since the browsers always display them the same. Another problem is that the checkbox itself is pretty small. Of course it’s not a real problem for such checkboxes:

Please send me more spam

You can click on the checkbox itself or on the label to toggle it. So the small size of the checkbox itself is not an issue. But when you have something like this, it’s more of a problem:

Even if you wrap the checkbox in a label for it, you can still click anywhere near the checkbox to toggle it but it’s not visible to the user that it’s possible.

A better solution would be to have some alternative representation of the checkbox e.g. as a switch. It’s also important to be able to adapt the size of the switch. Here’s how it should look like in the end (the first one is the normal size and the second one is twice as large):

Since you cannot style the checkbox itself, we’ll have to add a new element and hide the checkbox. Additionally, since some scripts will read the state of the checkbox, we need to keep the checkbox in there (even if not displayed) and we need to make sure that the state of the switch and the state of the check are in sync.

The easiest way to do it is to use a label. As can be see above if a label is created for a checkbox, clicking on the label toggles the checkbox. So the basic idea is to:

• add a label for the checkbox
• hide the checkbox
• style the label to look like a switch
• have a styling of the label based on the state of the checkbox

For the last point, we’ll leverage a special kind of CSS selector which selects elements that are placed immediately after a given element. This is done with a plus sign between the two elements:

input[type="checkbox"] + label

This would select the labels immediately following a checkbox. Using this we can style the labels depending on the state of the checkbox.

So first we need some HTML to have a checkbox:

<input class="switch" id="check1" type="checkbox" />

Note that I’ve used the class “switch” in case you do not want to turn all checkboxes into switches but only some of them. If you do want to turn them all into switches, just remove this class from all selector in the CSS and jQuery code in the rest of this post.

Your checkbox should also need to have an ID to be referenced by the label. Now let’s add the label dynamically using jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $('input[type="checkbox"].switch').each(function() {
            if ($(this).attr("id")) {
                $('<label for="'+$(this).attr("id")+'"></label>').insertAfter($(this));
            }
        });
    });
</script>

It does the following:

• Search for all checkboxes to be turned into switches
• Only change the ones with an ID
• Add a label immediately after the checkbox referencing the ID of the checkbox

Note that we do not need a special class for the label as we need to make the appearance dependent on the checkbox state anyway so no extra selector for the label is required.

If you want to achieve a solution without JavaScript, you’ll have to add the label after the checkbox manually in the HTML code e.g.:

<input id="check1" class="switch" type="checkbox">
<label for="check1"></label>

I’d rather use JavaScript and CSS pseudo-classes than polute my HTML code with elements which are only needed for styling. But I guess others may see it in a different way and rather use pure CSS and HTML than introduce some JavaScript.

Now we have this all in place, we just need to style the checkboxes and labels. An easier way to do it would be to use a background image. But I tend to avoid using images except for icons. And also if the element has to have a variable size, I definitely try to avoid images. The goal in this post is anyway no do show you how to make nice looking backgrounds with CSS only so we’ll stick to a plain two color background.

The first step is to hide the checkboxes we’ll turn into switches:

input[type="checkbox"].switch {
	display: none;
}

Now we want the label to look like a switch, so have a border, be rounded on the left and right and have a background color depending on its state (e.g. red for not checked and green for checked):

input[type="checkbox"].switch + label {
	background-color: #EE9090;
	border: 1px solid black;
	border-radius: 999px 999px 999px 999px;
	display: inline-block;
	width: 1.6em;
}

For the border radius, you’ll need to add the following to make it work in older browsers (i.e. Firefox < 4.0, Chrome < 5.0, Safari < 5.0, iOS Safari < 4.0 and Android Browser < 2.2):

-moz-border-radius: 999px 999px 999px 999px;
-webkit-border-radius: 999px 999px 999px 999px;

Please also note that IE only supports it starting with version 9.0.

The inline-block is a great invention. For those who still don’t know it, it’s a kind of float on steroids. It means it handles width and height just like a block element. But is displayed inlined with the surrounding elements just like inline elements. So this means that the label will have a width and height although it doesn’t have a text and that the round element we’ll add afterwards will be displayed in it.

Note that we’ve defined the width in ems. This allows us to make the element scale when we increase the font size.

Now, we’ll use pseudo-classes to dynamically add a round element which will be moved from left to right when the checkbox is checked:

input[type="checkbox"].switch + label:before {
	background-color: silver;
	border: 1px solid black;
	border-radius: inherit;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 0.8em;
	width: 0.8em;
}

So the content is empty because we do not want to display some text but only have a background and borders displayed.

box-sizing is used so that the width and height defined do already contain the borders. We want this element to be half the width of the containing label and to be round (so same height and width). Since the width of the label is defined in ems, the height and width of this element also have to be defined in ems. But since we need the border to always be 1 pixel (defining it also in ems makes it look terrible when the size is increased), we should define the width and height to be 0.8em – 1px. This is not possible. So we use box-sizing to say that the 0.8em already contains the border.

Note that box-sizing, requires a prefix for all versions of Firefox (both mobile and desktop) and required a prefix for Safari until version 5.0, for iOS Safari until version 4.3, for Blackberry Browser version 7.0, Android Browser until version 3.0. Also not that Internet Explorer version 7.0.

So you may want to add the following:

-moz-border-radius: inherit;
-web-kit-border-radius: inherit;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

When the checkbox is checked, we want to change the background color and move the round element to the right. Changing the background color is easy. The trick to move it to the right is to add a padding to the label. But adding the padding will make the label larger so at the same time we have to reduce the width of the label:

input[type="checkbox"].switch:checked + label {
	background-color: #90EE90;
	padding-left: 0.8em;
	width: 0.8em;
}

So now the switch is working ! But we want the transition to be smoother when the checkbox is checked or unchecked. This is done with the transition-duration and transition-property CSS properties:

input[type="checkbox"].switch + label {
	transition-duration: 0.3s;
	transition-property: padding, width;
}

This means that when changing the padding and width the transition will be distributed over 300 milliseconds. You could also add the change of background color but I felt it looks kind of strange because it looks like it changing to some kind of brownish color between red and green. Also, for this CSS property there are also browser specific prefixes:

-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-property: padding, width;
-moz-transition-property: padding, width;
-o-transition-property: padding, width;

Now we’re done !

To get a larger switch use the following:

<div style="font-size:200%"><input id="check2" type="checkbox" /></div>

You can find the whole code below:

<html>
        <head>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script type="text/javascript">
                        $( document ).ready(function() {
                                $('input[type="checkbox"].switch').each(function() {
                                        if ($(this).attr("id")) {
                                                $('<label for="'+$(this).attr("id")+'"></label>').insertAfter($(this));
                                        }
                                });
                        });
                </script>
                <style type="text/css">
                        input[type="checkbox"].switch {
                                display: none;
                        }

                        input[type="checkbox"].switch + label:before {
                            background-color: silver;
                            border: 1px solid black;
                            border-radius: inherit;
                            -moz-border-radius: inherit;
                            -web-kit-border-radius: inherit;
                            box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            -webkit-box-sizing: border-box;
                            content: "";
                            display: block;
                            height: 0.8em;
                            width: 0.8em;
                        }

                        input[type="checkbox"].switch:checked + label {
                            background-color: #90EE90;
                            padding-left: 0.8em;
                            width: 0.8em;
                        }

                        input[type="checkbox"].switch + label {
                            background-color: #EE9090;
                            border: 1px solid black;
                            border-radius: 999px 999px 999px 999px;
                            -moz-border-radius: 999px 999px 999px 999px;
                            -webkit-border-radius: 999px 999px 999px 999px;
                            display: inline-block;
                            transition-duration: 0.3s;
                            -webkit-transition-duration: 0.3s;
                            -moz-transition-duration: 0.3s;
                            -o-transition-duration: 0.3s;
                            transition-property: padding, width;
                            -webkit-transition-property: padding, width;
                            -moz-transition-property: padding, width;
                            -o-transition-property: padding, width;
                            width: 1.6em;
                        }
                </style>
        </head>
        <body>
                <input class="switch" id="check1" type="checkbox" />
                <br/><br/>
                <div style="font-size:200%"><input class="switch" id="check2" type="checkbox" /></div>
        </body>
</html>

I’m currently working on a new software and I am working on both an administration page and a home page for the software. I also made a login page. Currently the login page looks kind of strange because it basically only has a few elements and takes up almost the whole screen (except a header, a navigation bar and a footer). So the screen is much too big for the few elements I have in there. So I decided to move the login page to a floating login dialog which is much smaller and thus looks better. Here is a short tutorial how to build such a dialog with HTML, CSS and jQuery.

First, you need to understand what dialogs in this context are. Dialogs are usually implemented in such a way that you have an HTML element floating on top of the page. In order to have it not displayed in the page or below the page, you need to define a z-index which defines where the element is displayed on the Z axis. This is done in CSS with the following:

        .dialog-popup {
            display: none;
            left: 50%;
            position: fixed;
            top: 50%;
            z-index: 99999; 
        }

Here a short explanation about the different CSS properties set above:

• display: none => the dialog is not displayed when you open the page containing it but only when you click on some login link.
• left: 50% / top: 50% => we want to have the dialog centered on the screen. This defines that the top left corner of the dialog will be in the middle of the screen. This means we’ll have to add some negative left and top margins when we display the dialog in order to have the middle of the dialog centered (the exact offset of course depends on the height and width of the displayed dialog.
• position: fixed => this means that the position of the dialog doesn’t depend on the position of other elements but has a fixed position on the screen. Also note that the default value for position is static and with this set, the z-index will be ignored. So it’s important to set it to fixed.
• z-index: 99999 => All elements with a z-index smaller than 99999 will be displayed below the dialog. If elements have no z-index defined, they inherit the z-index of their parent and if none is defined for any element, they all have a z-index of 0.

To make it look nicer, we’ll also had the following to the CSS for .dialog_popup:

            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #222222;
            border-radius: 3px 3px 3px 3px;
            font-family: Verdana,Geneva,sans-serif;
            padding: 10px;

Note that you may want to add the corresponding browser specific properties for border-radius.

Now let’s first move to the HTML code before we get back to the CSS. We need a link which will display the dialog:

<a href="#" data-selector="#login-dialog" class="dialog-link">Login</a>

The data-selector attribute is a custom attribute which is used to indicate which div ID is to be opened in the dialog when the link is clicked.

Now we’ll define the div for the dialog itself:

<div id="login-dialog" class="dialog-popup">
	<form method="post" action="#">
		<fieldset>
		</fieldset>
		<button class="submit" type="button">Login</button>
	</form>
</div>

To actually open the dialog, we’ll use jQuery. First we’ll load jQuery from Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then we’ll define that the dialog with the id defined in the data-selector attribute will be made visible with a fade in effect and its margins will be adapted so that it’s properly centered:

    <script type="text/javascript">
        $(document).ready(function() {
            $('a.dialog-link').click(function() {
                var dialog_id = $(this).attr('data-selector');
                $(dialog_id).fadeIn(200);
                $(dialog_id).css({ 
                    'margin-top' : -($(dialog_id).height() + 4) / 2,
                    'margin-left' : -($(dialog_id).width() + 4) / 2
                });
                return false;
            });
        });
    </script>

To go from the top left corner to the middle of the dialog, we’re defining a negative top and left margin corresponding to half the height and width of the dialog. We also add 4 pixels to the height and width because of the 2 pixels border on all 4 sides of the dialog.

If you want the dialog to be displayed faster, you should reduce the 200 parameter in the fadeIn call. If it’s too fast for you, increase it.

Now we’ll want to add some content to our login dialog:

• A close button.
• A username field.
• A password field.
• A link for users who forgot their password.

For the close button, I’ll this nice little icon:

With these additions, the HTML code for the dialog looks like this:

<div id="login-dialog" class="dialog-popup">
	<a href="#" class="close"><img src="close.png" class="close-button" title="Close this dalog" alt="Close" /></a>
	<form method="post" action="#">
		<fieldset>
			<label for="username">
				<span>Username</span>
				<input type="text" id="username" name="username" placeholder="Username" value=""></input>
			</label>
			<label for="password">
				<span>Password</span>
				<input type="password" id="password" name="password" placeholder="Password" value=""></input>
			</label>
			</fieldset>
		<button class="submit" type="button">Login</button>
		<a href="#" id="forgot-password-link">Forgot your password? Click here.</a>
	</form>
</div>

We’ll need to style it a little bit. First place the close button on the top right corner:

.dialog-popup .close-button {
	float: right;
	margin: -26px -26px 0 0;
}

Then we’ll remove the border and padding from the fieldset:

.dialog-popup form fieldset {
	border: medium none;
	padding: 0;
}

Then we’ll make the labels and input elements look nicer:

.dialog-popup form fieldset label {
	display: block;
	font-size: 1.2em;
}

.dialog-popup form fieldset label span,
.dialog-popup form fieldset label input,
.dialog-popup form button,
.dialog-popup form a {
	display: block;
	margin-bottom: 10px;
}

.dialog-popup form fieldset label input {
	background: none repeat scroll 0 0 #EEEEEE;
	border-color: #FFFFFF #DDDDDD #DDDDDD #FFFFFF;
	border-radius: 3px 3px 3px 3px;
	border-style: solid;
	border-width: 1px;
	color: #000000;
	padding: 6px 6px 4px;
	width: 200px;
}

Style the submit button:

.dialog-popup form button.submit {
	border-color: #000000;
	border-radius: 3px 3px 3px 3px;
	border-width: 1px;
	cursor: pointer;
	margin-top: 10px;
	padding: 6px 6px 4px;
	width: 200px;
}

.dialog-popup form button.submit:hover {
	background-color: #E0E0E0;
}

And the link for those who forgot their password:

#forgot-password-link {
	color: #00AE00;
	font-size: 0.7em;
	text-align: center;
	text-decoration: none;
	width: 200px;
}

Now that everything looks nice, we’ll also add an overlay below the dialog, so that we can make the page under the dialog darker. This way it is clear to the user, that he/she has to focus on the dialog and not the page in the background anymore. So first we need to add a div for the overlay e.g. after the definition of the dialog:

<div id="dialog-overlay" title="Click here to close the dialog">

This overlay is also hidden when the page is first displayed (just like the dialog itself) and will be displayed when the link is clicked. The overlay should cover the whole page, be dark and semi-transparent.

Being hidden by default means:

display: none;

Below the dialog but over of the page:

z-index: 99998;

Covering the whole page:

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;

Being dark and semi-transparent:

background: #000;
opacity: 0.75;

This makes the page in the background still visible but not really readable. If it’s too dark for you, just reduce the opacity: 0 means transparent, 1 means opaque (i.e. the page is not visible anymore).

Now that we’ve defined the overlay below the dialog, we need to have it display at the same time as the dialog itself. This is done by adding the following line just above the similar line making the dialog appear:

$('#dialog-overlay').fadeIn(200);

And we want both to disappear when the close button is clicked. Actually we also want both to disappear when you click on the overlay (so outside of the dialog). It is easy to do it with jQuery:

$('.dialog-popup a.close, #dialog-overlay').click(function() { 
	$('.dialog-popup').fadeOut(200);
	$('#dialog-overlay').fadeOut(200);
	return false;
});

And we’re done. The dialog looks like this when it is displayed:

In case you do not like puzzle games and would rather see the whole code at once, here it is:

<html>
    <head>
    <style>
        #dialog-overlay {
            background: #000;
            bottom: 0;
            display: none;
            height: 100%;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.75;
            position: fixed;
            right: 0;
            top: 0;
            width: 100%;
            z-index: 99998;
        }

        .dialog-popup {
            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #222222;
            border-radius: 3px 3px 3px 3px;
            font-family: Verdana,Geneva,sans-serif;
            padding: 10px;
            display: none;
            left: 50%;
            position: fixed;
            top: 50%;
            z-index: 99999; 
        }

        .dialog-popup .close-button {
            float: right;
            margin: -26px -26px 0 0;
        }

        .dialog-popup form fieldset {
            border: medium none;
            padding: 0;
        }

        .dialog-popup form fieldset label {
            display: block;
            font-size: 1.2em;
        }

        .dialog-popup form fieldset label span,
        .dialog-popup form fieldset label input,
        .dialog-popup form button,
        .dialog-popup form a {
            display: block;
            margin-bottom: 10px;
        }

        .dialog-popup form fieldset label input {
            background: none repeat scroll 0 0 #EEEEEE;
            border-color: #FFFFFF #DDDDDD #DDDDDD #FFFFFF;
            border-radius: 3px 3px 3px 3px;
            border-style: solid;
            border-width: 1px;
            color: #000000;
            padding: 6px 6px 4px;
            width: 200px;
        }

        .dialog-popup form button.submit {
            border-color: #000000;
            border-radius: 3px 3px 3px 3px;
            border-width: 1px;
            cursor: pointer;
            margin-top: 10px;
            padding: 6px 6px 4px;
            width: 200px;
        }

        .dialog-popup form button.submit:hover {
            background-color: #E0E0E0;
        }    

        #forgot-password-link {
            color: #00AE00;
            font-size: 0.7em;
            text-align: center;
            text-decoration: none;
            width: 200px;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('a.dialog-link').click(function() {
                var dialog_id = $(this).attr('data-selector');
                $('#dialog-overlay').fadeIn(200);
                $(dialog_id).fadeIn(200);
                $(dialog_id).css({ 
                    'margin-top' : -($(dialog_id).height() + 4) / 2,
                    'margin-left' : -($(dialog_id).width() + 4) / 2
                });
                return false;
            });

            $('.dialog-popup a.close, #dialog-overlay').click(function() { 
                $('.dialog-popup').fadeOut(200);
                $('#dialog-overlay').fadeOut(200);
                return false;
            });
        });
    </script>
    </head>
    <body>
        <a href="#" data-selector="#login-dialog" class="dialog-link">Login</a>
        <div id="login-dialog" class="dialog-popup">
            <a href="#" class="close"><img src="close.png" class="close-button" title="Close this dalog" alt="Close" /></a>
            <form method="post" action="#">
                <fieldset>
                    <label for="username">
                        <span>Username</span>
                        <input type="text" id="username" name="username" placeholder="Username" value=""></input>
                    </label>
                    <label for="password">
                        <span>Password</span>
                        <input type="password" id="password" name="password" placeholder="Password" value=""></input>
                    </label>
                    </fieldset>
                <button class="submit" type="button">Login</button>
                <a href="#" id="forgot-password-link">Forgot your password? Click here.</a>
            </form>
        </div>
        <div id="dialog-overlay" title="Click here to close the dialog">
    </body>
</html>

I’m currently working on a web page which has a navigation area in the header and looks like this:

<nav>
    <ol class="main_menu">
        <li><a href="http://localhost/demo/index.php/home" class="active">home</a></li>
        <li><a href="http://localhost/demo/index.php/features">Features</a></li>
        <li><a href="http://localhost/demo/index.php/pricing">Pricing</a></li>
        <li><a href="http://localhost/demo/index.php/support">Support</a></li>
        <li><a href="http://localhost/demo/index.php/blog">Blog</a></li>
        <li><a href="http://localhost/demo/index.php/register">Sign up</a></li>
        <li><a href="http://localhost/demo/index.php/login">Login</a></li>
    </ol>
</nav>

Now I wanted to have the active page somehow highlighted so that the user can clearly see where he is. So first I defined some styles for this highlighting (basically just making it bold and underlined):

<style type="text/css">
    nav .active {
        font-weight: bold;
        text-decoration: underline;
    }
</style>

So what I needed now was some JavaScript to check the currently loaded URL and check which of the navigation links should be highlighted. All URLs start with http://localhost/demo/index.php. So I just needed to check the 4th part of the location path, find the navigation link related to that (so basically the link which ends with the same 4th part). Additionally if you go to http://localhost/demo/index.php you are shown the Home page even though the URL doesn’t end with /home. So I also needed to handle this special case.

So first I needed a JavaScript function to get the last part of the URL. Here I just needed to split the path using a slash as a separator and get the last one. There is just one exception: if the URL ends with a slash, I do not get the last one but the second to last (so that I do not get an empty result):

function getLastPart(url) {
    var parts = url.split("/");
    return (url.lastIndexOf('/') !== url.length - 1 ? parts[parts.length - 1] : parts[parts.length - 2]);
}

Now that we have it, we’ll get the last part of the URL and activate the link which ends with this last part. Additionally if the last part is index.php, we’ll highlight the Home link:

$(function() {
    var lastpart = getLastPart(window.location.href);
    $('nav a[href$="/' + lastpart + '"]').addClass('active');
    if (lastpart == "index.php") {
        $('nav a[href$="/home"]').addClass('active');
}

About the jQuery selector for the link selection:

nav a[href$="/home"]

It basically says to find a link in the navigation (i.e. nav a) having a href attribute (i.e. nav a[href…]) ending with (i.e. href$=) “/home”.

Of course if your URLs look different e.g. if you have query parameters or it is not the last part of the URL which is relevant for the link selection, you’ll need to adapt the getLastPart function. If it is not the last part of the URL which is relevant, you’ll also need to use a different selector.

Here the complete JavaScript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
<script type="text/javascript">
<!--
$(function() {
    var lastpart = getLastPart(window.location.href);
    $('nav a[href$="/' + lastpart + '"]').addClass('active');
    if (lastpart == "index.php") {
        $('nav a[href$="/home"]').addClass('active');
}
  });
function getLastPart(url) {
    var parts = url.split("/");
    return (url.lastIndexOf('/') !== url.length - 1 ? parts[parts.length - 1] : parts[parts.length - 2]);
}
//-->
</script>