Stylize Checkboxes and Text Fields Using CSS

Published January 16, 2015 by CSS Newbies.

Adding stylish checkboxes in HTML as well as buttons can be done very easily by using the CSS. There are actually two methods of creating stylish checkboxes. One method is image based and another method is based purely on CSS. However, here we will discuss both methods of adding stylish checkboxes.

Image based styling of checkboxes will allow excellent flexibility. Moreover, the appearance will be flexible as well. In this example, we will actually combine three images of three different states. Those states will be ‘selected radio button’, ‘unchecked’ along with ‘selected checkbox’.

The HTML of following form is going to be used for each radio button or checkbox.

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option">Value</label>
</div>

In the style-sheet, we will be hiding the radio buttons as well as checkboxes.

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

In the line 1 and line 2, selectors use negation pseudo-class for hiding the rules from the older browser. Line 3, 4, 5 is used for setting margin, padding and width. Line 6 has been used for rendering the standard user interface by setting the opacity. After that, we can now do the positioning of the label and displaying of any unchecked image. Here is the coding:

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('checks.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('checks.png') no-repeat 0 0;
  line-height  : 24px;
}

At last, when the radio buttons as well as checkboxes are selected, we will be able to display the selected images.

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}

As we have combined images of various states into one image, the rules will modify background position for showing appropriate image.
However, now we will be discussing the pure CSS styling. It will be also be scaled with the size of text.

The HTML coding will be same for all checkboxes.

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option"><span><span></span></span>Value</label>
</div>

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option"><span><span></span></span>Value</label>
</div>

The span is used for creating the alternative graphics. Both spans are required for radio buttons, in case of checkboxes only one is needed. However, now we have to hide the radio buttons as well as checkboxes from the style-sheet. Here is the coding.

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

After that, we need to position the label. The coding is here.

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

Now, we have to style the first span for creating unchecked graphics.

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

On the selected checkboxes as well as radio buttons, the background gradient is reversed.

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

After that, we need to display one tick inside the selected checkboxes.

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

At last, we have to display the ‘bullet’ within the selected radio button. There will be application of the same techniques as it has been for unchecked graphics to 2nd span element. Here is the coding:

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

Now we will discuss how we can add text fields. Addition of text field is pretty simple in relation to the checkboxes and radio buttons. The coding and result are given below.

<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
 .textbox { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 275px; 
  } 
<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
<input class="textbox"type="text"> 
 .textbox { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 275px; 
  } 

Styling Zebra Striped Tables With CSS

Published November 3, 2008 by CSS Newbies.

I recently spent a bit of time on the OneHundredPushups website, and the aspect of the site that most caught my eye (aside from ninja-girl on the front page) was the zebra-striped tables strewn throughout. (For those not in the know, zebra striping tables refers to alternating colored backgrounds on table rows, a la iTunes.) Studies have shown that there is (or at least can be) a slight performance increase associated with zebra striped tables (or at least there isn’t a decrease), and that most users prefer zebra striping to traditional lined tables.

I thought the tables on OneHundredPushups were fairly well done (take a look for yourself here), but a glance at the code showed me that the developer had put more work than was necessary into creating his stripes. Here, I’ll show you an easy way to create a table like the one in the image above (or on the example page here) that doesn’t require you to mess with your XHTML — in fact, you could easily apply this to tables already on your website!

Of course, before we can dive into the CSS, we’ll need a table to style. Mine looks something like this:

<table cellpadding="0" cellspacing="0">
	<tr>
		<th>State</th>
		<th>Date of Poll</th>
		<th>% Voting Dem.</th>
		<th>% Voting GOP</th>
	</tr>
	<tr>
		<td>AR</td>
		<td>10/27</td>
		<td>44</td>
		<td>54</td>
	</tr>
	<tr>
		<td>AZ</td>
		<td>10/23</td>
		<td>41</td>
		<td>49</td>
	</tr>
	... and so on ...
</table>

As you can see, it’s nothing out of the ordinary. I’ve used the old-school cellspacing and cellpadding attributes just to ensure consistent treatment across browsers. And otherwise, I’m using a <th> tag or four to distinguish my table headers from the rest of my code. Otherwise, we’ve just got rows and cells galore. You’ll notice there’s not a single class or ID present here (although if I only wanted to style some of the tables on my site, I’d probably give the styled ones a specific class name).

Next, let’s take a look at the basic CSS styles I’m using:

table {
	width: 100%;
	border: 1px solid #cef;
	text-align: left; }
th {
	font-weight: bold;
	background-color: #acf;
	border-bottom: 1px solid #cef; }
td,th {
	padding: 4px 5px; }

I’ve set the table width to 100% to stop it from collapsing to its minimum size (the default behavior), then given it a pale blue border around the outside. I’ve also set the text alignment throughout the table to “left” — this is to prevent my table headers from centering themselves, which is the default. I prefer my headers to be aligned with my content, but your mileage may vary.

When it comes to the headers, I’ve done a little styling: I’ve given them a background color (a bit darker than my border), bolded the text, and given the bottom of the headings a border what matches the border around my entire table.

Finally, I’m just adding a bit of padding to the interiors of the table cells, to give them a little breathing room. Personally, I think an appropriate use of white (or at least negative) space can be just as critical to legibility as zebra striping — perhaps someone out there more statistically inclined than me should look into that!

Those styles give us our basic table layout, which looks something like this:

So how do we get the alternating rows? For that, I’m creating a new class in my CSS, specifically for the odd (that is, not-even) rows of the table:

.odd {
	background-color: #def; }
.odd td {
	border-bottom: 1px solid #cef; }

This class, once applied to alternating rows of my table, would cause every other row to gain a pale blue background color and a slightly darker bottom border. Since this A List Apart study by Jessica Enders suggested that alternating colored rows and underlines were two of the most aesthetically appealing ways to present tabular data, I figured… why not use both?

Now if I wanted, all I would need to do is go back through my HTML and apply this class to alternating rows in my tables, like the folks at OneHundredPushups have done. However, you’ll notice that my code above doesn’t have any CSS classes. That’s because I prefer to work smarter whenever I have the chance. Instead of turning back to my HTML, I’m going to look to JavaScript (specifically, jQuery) to do my heavy lifting for me.

To apply our class automatically, all the jQuery I need is this:

$(document).ready(function(){
	$("tr:odd").addClass("odd");
});

In layman’s terms, this tiny snippet is saying, “once the document is done loading, cycle through the page, find every ‘odd’ table row, and give it a class of ‘odd.’” Then our CSS takes over and does the rest. Oh, and for the record, you could also write a second rule like this:

$("tr:even").addClass("even");

Which would do the exact same thing as above, only apply it to the “even” rows of the table. And just so you’re not caught off guard by this script’s behavior, it’s good to know in advance that the :odd and :even pseudo-classes start counting at zero, not one. So the first row of your table is, according to jQuery, the “0th” row, and is therefore even.

And there you have it! You can see the whole thing in action here. And now, go forth and make the web a more beautiful (or at least stripy-er) place.