Add Some Pizzazz to Your Text Boxes with HTML5 and CSS3

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.

Say, for instance, you wanted to freshen up a simple multi-line text box:

<textarea rows=4 cols=40>
Your information here ...
</textarea>

Box with Rounded Corners

To display a rounded box with a light blue background, and bordered by darker blue, add the following CSS3 code to your stylesheet:

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.

In case you were wondering, the two prefixes, -moz and -webkit, were implemented within the CSS3 framework to provide developers a way to create new and experimental features targeted toward specific browsers. Mozilla Firefox corresponds to -moz, and Safari and Chrome fall under the auspices of -webkit.

It was recently announced, however, that Opera would begin supporting the -webkit prefix. Previously, the browser only responded to a coding directive sporting the -o prefix.

Reportedly, the reason for making the move was because so many websites were utilizing new webkit-based HTML5 and CSS3 features that Opera didn’t want to give others too much of a competitive advantage.

Likewise, there are rumblings that Mozilla and Microsoft (IE) might join the -webkit party too, based on discussions at a CSS Working Group meeting held in February of this year. It therefore appears that, in time, the -webkit designation might become a cross-browser standard, of sorts.

Box with Drop Shadow

For a slightly different style, let’s add a drop shadow to the text box with the following CSS3 coding:

Search Box with Rounded Corner Background

The above examples can also be used in conjunction with other types of boxes – in this instance, a search box. The box itself is wrapped by a rounded background image, giving it a much more distinctive style.

Note that an HTML5 feature, ‘placeholder text’, is deployed in the search box. This allows for designated ‘grayed’ text to be viewed inside the box when the web page loads. A click inside of the search box makes the text disappear, clearing the space for the user to type in their own keywords.

The placeholder text feature can be properly viewed with the following browsers: Firefox (4.0+), Safari (4.0+), Chrome (4.0+), Opera (11.0+), and IE (10.0+), in addition to mobile browsers, iPhone (4.0+), and Android (2.1+). Browsers that do not support the feature will just ignore it.

The result:

Conclusion

Form boxes, a web element that has long remained staid and dowdy, can now be embellished with some ‘bling’. No longer do boxes have to be the blandest part of your web pages.

By creatively employing some of the CSS3 coding in this article, a box can become a distinct style enhancer. There are a huge variety of options that can be applied, involving different background colors, border styles, gradient types, and more.

David is a long-time journalist and editor, who also has over 10 years of experience as a freelance Web developer, specializing in online newspaper design and maintenance.
More articles by David Elliot

Alexandre Kilian

Sorry, but that looks awefull…

Dave

The color adjustments that can be made by utilizing the techniques outlined in the article are wide ranging. If blue doesn’t happen to be your preference, there are any number of color substitutions that are readily available.

Dan Howard

Your inability to spell detracts from your opinion.

Jason Hamm

Maybe he is from South Georgia. At least if he is going to post something negative, he could be more specific and give something constructive. Ignorance is everywhere.

the code is fine… the dimensions and taste for colour might differ… still, it shows the basics, as it is intended to do

Martin Sweeny

An alright start. But, you should have followed up “the very basics” with some more advanced techniques. Show how these simple steps, when combined properly, can create highly detailed and beautiful elements. Also, you could have shown examples on other websites that use these techniques well.

Dave

Thanks for these constructive suggestions, which I will endeavor to address in a future article.

samuel.woodbridge

Thanks for the tips, I tend to customise my text areas to fit in with the over all style of the webpage. While they are good techniques to know it’s a bit a of a shame that they aren’t fully browser compatible so users still using anything less than IE 8, which is still quite a lot, don’t get the full benefit!

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.