Add Some Pizzazz to Your Text Boxes

Most online text entry fields, including text boxes and search boxes, look exactly like the name implies — very “boxy”. Relatively few website owners have availed themselves of the latest coding advances to incorporate subtle touches into their form elements to create an entirely new look. With HTML5 and CSS3, powerful, yet simple coding tools will now allow for speedy and effective appearance upgrades for all types of boxes.

David Elliot will start by adding some CSS3 code to the stylesheet to display a rounded box with a light blue background, and bordered by darker blue. The resulting text box will appear, when viewed with Firefox (3.5+), Safari (5.0+), Chrome (5.0+), Opera (10.5+), or IE (9.0+). Of course, the named form element, width, padding, background color, border type and color are all easily adjustable. It is the CSS3 ‘border-radius’ property that allows web designers to produce rounded corners, without the previous need for pre-configured corner images.