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:
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; }
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
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;
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; }
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:
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.