CSS3 Input Fields

I have seen many tutorials on the web for CSS3 buttons, but not so much on what I’m going to briefly mention today, and that is CSS3 input fields.

Many website designs that I work with contain rounded cornered input fields, which normally meant using a background image from the design to achieve the required look. With CSS3 rounded corners and box shadows, this doesn’t necessarily need to be the case (although in some cases it still will be – depending on the complexity of the design!).

So what is the required result? Well it’s this:

Rounded corner input field with an inner shadow

The HTML

The required HTML is as simply as you’d expect:

<label for="textfield">Enter text:</label>
<input id="textfield" type="text" />

The CSS

Obviously this is a little more involved since the post is about CSS3!

label {
   display:block;
   margin-bottom:5px;
}
input {
   border:none;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   -webkit-box-shadow:0 0 5px #666 inset;
   -moz-box-shadow:0 0 5px #666 inset;
   box-shadow:0 0 5px #666 inset;
   height:25px;
   line-height:25px;
   width:200px;
   text-indent:5px;
}
input:focus { outline:none; }
It’s quite straightforward, but I’ll go through some of it briefly.

border:none;
removes the default border that all browsers add to input fields

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
adds rounded corners to the input field using the border-radius property

-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
uses the box-shadow property to add the shadow to the input field. Note that is uses the inner attribute to apply the shadow inside the field rather than outside.

input:focus { outline:none; }
this turns off the annoying blue outline that Webkit browsers like to throw around an input field that has the current focus.

That’s it! Whizz over to the demo page to see it “in action”.

Browsers

As you’ll notice, the CSS3 properties require some browser specific definitions to ensure it works cross browser. So the example above works in all the latest versions of Firefox, Chrome, Safari, Opera and Internet Explorer.

But of course then there’s Internet Explorer 8 and below. You can use something like CSS3PIE to get the rounded corners and box shadow working in these versions of the browser, but it doesn’t yet support the inset attribute (it is in the pipeline) so the effect is not the same.

You can leave it as is, and leave out the shadow altogether, or use a different definition for box-shadow as I have in the demo page above, which uses the following definition for IE 6 -> 8:

input {
   box-shadow:0 0 8px #666;
   behavior:url('PIE.htc');
}

There CSS3PIE allows the rounded corners to be added and the different box shadow applied:

Rounded corner input field for Internet Explorer with an outer shadow

The result is acceptable, but not as good, so you may want to leave it out. As always with such things, it’s up to you.