Make your forms beautiful with CSS
06 Add some style

Take the time now to review the page. The form already looks much better. Don’t be tempted to stop at this point, though. We’re going to make this form feel like it belongs on the page. Start off by increasing the font size of the form fields to be more user-friendly and appropriate to the page design. Add the code below beneath all the existing rules in the style sheet.
input {
padding: 5px;
font-size: 1.4em;
border: 1px solid #493F0B;
color: #1E1903;
background: #F5F6D4;}
07 Fix the label
The label text is now misaligned, so we need to add an additional rule to the label selector to make the label text align vertically with the form fields. We’re going to take advantage of the line-height attribute to force the label text to take up more vertical space. The precise figure that will work requires a bit of experimentation; we found a value of 3.4em to work well. Add the rule below into your existing label section.
line-height: 3.4em;
}
08 Required fields

We’ve got a ‘*’ marking our required fields currently, which is very important in terms of usability, but can be made far more obvious and aesthetically appealing by using a graphic instead. If you examine the HTML, you’ll see we’ve wrapped the ‘*’ in a span in each case. We’ve also set each label for a required field to have a class of ‘required’. These two hooks allow us to attach our rules conditionally so that the graphic only shows up where the field is required. We’ll start off by hiding the span by setting it to be absolutely positioned, and pushing it off the left of the screen. Here, add the code below after your existing rules.
label span {
position: absolute;
left: -10000px;
top: 0px;
}
09 Add the graphic
The asterixes are now hidden, but we need to bring in the graphic for each required field. This is very easy to do, as we simply add the background and set it to be positioned to the right of the label. We only want this background to be applied to labels with the required class. Once more, add the rules below to the style sheet:
/*label.required {
background:transparent url(required.gif) no-repeat center right;
}
10 Add padding
The graphic looks great in place, but it’s overlapping the label text. This is easy to fix, thankfully. Simply add some padding to the right-hand side of the label to compensate for the width of the background graphic. Locate your label section in the style sheet and include the rule below to add this padding. Note that we don’t add this rule only to the label.required selector because if we did this, the nonrequired labels would align differently to those that are required.
padding-right: 30px;


Thanks a lot..
I definitely need to work on this. Thanks!
yeah… I like it. Thanks
its wonderful share and its really helpful for new comer CSS developer
Thanks for the tutorial! There are not very many good examples of stying forms on the net.
[...] Make your forms beautiful with CSS | Web Designer – Defining the internet through beautiful design (tags: design css forms beautify) [...]
Try this Javascript refinement on the form… it works out better.
[...] Make your forms beautiful with CSS | Web Designer – Defining the internet through beautiful design Great read on Forms and CSS (tags: css forms webdesign form html style webdev design) [...]
[...] Make your forms beautiful with CSS | Web Designer – Defining the internet through beautiful design – Tutorial wie Online-Formulare mit CSS noch schöner gemacht werden können. [...]
what a great course . Thanks a lot !
[...] Make your forms beautiful with CSS | Web Designer – Defining the internet through beautiful designwebdesignermag.co.uk [...]
谢谢 ,写的很好
[...] Make your forms beautiful with CSS [...]
[...] Make your forms beautiful with CSS [...]
[...] Make your forms beautiful with CSS [...]
[...] beautiful forms with cascading style sheets [download tutorial [...]
[...] beautiful forms with cascading style sheets [download tutorial [...]
Thank you for your input.
This was a great tutorial, I did pick up 1 or 2 new techniques that I’ll use in my next form. I do however have a question, how would you go about creating a Li with 2 text boxes within it i.e. Lets say you want to have title and first name next to each other or if the space for the fieldset requires a 2 or 3 column layout?
A tutorial showing that would be great
Good tutorial. The form provided me with new ideas for my next form.
Thanks again
Nice
Cool, Thanks for input
[...] Make your forms beautiful with CSS | Formulare sind meist ein wichtiger Bestandteil einer Website. Und damit auch das Aussehen der Formulare stimmt, gibt es CSS! [...]
[...] Make your forms beautiful with CSS [...]
Thanks. Nice tutorial.
[...] 16. Make your forms beautiful with CSS [...]
[...] 16. Make your forms beautiful with CSS [...]
One of the best form examples I’ve seen in a while. Good job!
[...] 15. Make your forms beautiful with CSS [...]
[...] 15. Make your forms beautiful with CSS [...]
me too. like this one
Thanks lot!
[...] 16. Make your forms beautiful with CSS [...]
very nice..
Good guide, picked up a few ideas. Many thanks! Ted
Nice helpful stuff. Thanks
[...] 3. Make your forms beautiful with CSS [...]
Good guide, picked up a few ideas. Many thanks! Ted
It is so important to keep on top of the latest techniques, articles like this are great for improving skills and always giving the end user a good experience when visiting your website. Thank you
[...] 16. Make your forms beautiful with CSS [...]
What's your opinion?