Make your forms beautiful with CSS
06 Add some style
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;
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
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.
Try this Javascript refinement on the form… it works out better.
what a great course . Thanks a lot !
谢谢 ,写的很好
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 :D
Thanks. Nice tutorial.
One of the best form examples I’ve seen in a while. Good job!
me too. like this one
Thanks lot!
very nice..
Good guide, picked up a few ideas. Many thanks! Ted
Nice helpful stuff. Thanks
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
Wow! Fantastic designs on this tutorial. I would really love to try this out on my own. Thanks for posting this one.
another wonderful tutorial.
You have written a very informative post. I came across your blog via google.com by searching relevant information. I have bookmarked your site and sent the link to sme of my colleagues are will also find that useful.
Thanks lot!
A Brilliant article in all, thankyo for sharing it, i’m sure the info here will be put to good use :)
found this blog interesting thanx for sharing
CSS has greatly helped in web design. You have provided a good tutorial about css.
This is a very useful tutorial, thanks for sharing. Small design ellements and CSS can make a huge difference to the appearance of a web form.
I keep checking the website for new tuts but this one has been very interesting and knowledge full . GREAT guys keep it up
Hm, I’m ok with this nevertheless not 100 % convinced, so i am going to research even more.
whatever you have to says i wil try to update on my company websites & clients sites. really it give some attractive look. thank you for share this post..
Its really nice and wonderful tutorial.so we learn more with the help of this.so keep share always…..
Post a live demo dude
Beardsley, eh? It might be worth the flight out there.
You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it!
This is sweet! Thanks!!!