As a designer, being able to style every HTML element with CSS is what I desire, and not having to use additional scripts to do it is an even bigger desire. We already have a good amount of control over text, paragraph fields and submit buttons, but not much control over other form elements.
This article will show you how to style all form elements and cover which techniques work in which browsers.
Custom Style All Your Form Elements with Pure CSS
- check boxes
- radio inputs
- select boxes
- file upload inputs
- text area
- text fields
- submit buttons
You will need to download this zip file for the element images.
First Things First
Your HTML tag should look like this:
This is Paul Irish's technique to target IE browsers without using hacks. This'll come in handy when we start coding. We're using HTML5, so make sure you have the HTML5 Shiv in your
and reset your form elements like so:
Check and Radio Inputs (works in IE9, FF, O, Webkit)
Let's get started with the check boxes and radio buttons. We'll need the
element to precede the check box and radio inputs for this to work properly. Here's the markup:
"id" variables on the inputs match the
for variables on the labels. This allows us to toggle the radio and check inputs by clicking the label itself, which is larger and easier to click with a mouse arrow or a finger. This is the way labels and input fields were intended to operate.
This moves the browser's default radio and check inputs out of view:
Now we'll replace them by adding a pseudo element with a background image to our
label element. We're adding a pseudo element instead of some padding and a background image to the
label itself because the pseudo method allows us to use image sprites. Image sprites cut down on HTTP requests making the site load faster. For the check and radio inputs, I have two images: one for the off state and one for the on state. Each image is exactly 25 pixels by 25 pixels.
Here's the CSS with comments:
Now we have our images in place, but the background needs to be positioned. If sprites get complicated, you can always open them in your graphics program and measure the distance with a ruler and get the numbers that way. I keep my sprites simple and all the same size so they're easy to calculate in CSS:
The second lines of code say: if the input has a :checked pseudo class, change the background position of the label's pseudo element that precedes it. As mentioned before, this technique only works when the
label precedes the
input element in the markup. You can learn more about advanced CSS selectors in this great Smashing Magazine article.
We want to support our IE7-8 users so we are going to remove the custom styling for these browsers because, while IE8 supports pseudo elements in markup, it doesn't support the pseudo
:checked class, so our toggle won't work, and IE7 supports none of these techniques.
For IE8, I noticed some weirdness in the alignment of the input and the label and so I fixed it. It could've been my IE Tester software, so this code is optional. Use and adjust it if IE8's input alignment looks wacky to you.
[ demo link ]
Select Fields (Works in IE8+, FF, Webkit)
The credit for this technique belongs to: Bovotasan
The problem with select fields are those drop down buttons. There's no way of styling them, so what we can do is hide them. Basically, we'll wrap the
select box in a
div, make the select box longer than the
div and make the
div hide the access width of the select box (which is where the drop down button is). Then we'll apply a background image with our own drop down button. Here's the image we'll be using and the markup:
Here's the CSS:
Now we remove any styling from the select box within in the
This technique doesn't work in IE7, so you'll have to remove the styling from the
div and apply it to the select box itself. Basically you'll have to fallback to standard styling for IE7. IE7 Doesn't support background images on
select either. IE7 is the new IE6.
File Upload Field (Webkit only)
Adapted from but credited to: The Computer Whiz
Now the file upload field is the most difficult to style, but it is very customizable in Webkit. I originally had a method of creating an upload button and placing it on top of the default button using a pseudo element for Webkit only, but the Computer Whiz method is much better. When I came across it, I decided to use it, but with a few changes of my own. Here's the markup:<input type="file" />
This styles the text box:
This removes the default file upload button:
This styles the upload file button, you can even change the wording.
The Computer Whiz has knowledge of Webkit prefixes that I don't, so I began searching for an exhaustive list. Although this is a good page, I don't feel it's exhaustive. If you know of any other lists, please let us know. As Chrome has become the second most used browser, just behind Internet Explorer and passing Firefox, these extensions will come in handy when styling elements of any kind in Chrome.
Text Fields and Buttons (all browsers)
Most of us already know how to style these elements, but just in case you don't, here's the code. Of course the box shadows don't work in IE8 and earlier, so you'd either have to setup a conditional style or live without the special effects. I tend to go for the latter. Less code is better. Here's the HTML:
For text fields and text boxes:
With HTML5 forms can have new text attributes. The widely used ones are:
number. These can be styled just as the
input text field and can be selected using the below CSS:
For submit buttons
Note: For newer CSS3, make sure to include the vendor prefixes for Firefox and Webkit/Android users still on Gingerbread 2.3.
Bonus: Making the form fields responsive
First of all, let's make the form fit the viewport on mobile devices. Put the following
meta in the
head of the document:
I keep my media queries in the same CSS file - right at the bottom. The following code says: If the view port is 600 pixels wide or less, change the body font size (which cascades) to 15 pixels. Because of mobile screen sizes, it's good to make the text a little smaller. The second query says: if the view port is 400 pixels wide or less, make the form elements' width 100%.
If you're having trouble with the media queries working in Firefox, depending on what add-ons/extensions you have installed to make Firefox better, these may prevent you from testing the responsive site. The solution is to disable your add-ons until you find the one that's causing the problem. Or it could be Firefox's menu bar: you might have to change the way it's displayed to resolve this issue.
SHARE THIS POST
ABOUT THE AUTHOR
Onextrapixel is a leading online magazine and resource site for designers and web developers. The Singapore based portal aims to collect, explore, as well as share useful tips, news, tutorials, tools and resources; on design, development and other inspiration. We hope that everyone will find something here that is useful and interesting.