Mobile Friendly Website


Doing it with style

styling forms COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Great job! The form looks very nice.
But why didn't you add ids to the checkboxes and radios? Thus you could toggle the checkboxes/radios by clicking on the label.
(19.11.2005, 11:11)

Markus, I think that it would be a bit over the top, but yes it could be done. I am thinking of asking visitors for their css for this form and have a style sheet switcher (so I may include this feature).
(19.11.2005, 11:21)

Steve Williams:-
I agree with Markus, from a usability standpoint it's always a good idea to correctly tie the label to the element for ease of clicking.

BTW, the 'sneezing' checkbox overruns the line in Safari, ending up on a line of its own. Let me know if you want a screenshot?
(19.11.2005, 11:42)

The same in Opera. The last checkbox is wrapped to the next line. Implementing a style switcher would be a good idea I think. There's so much that could be done with a simple form.
(19.11.2005, 12:14)

Markus, I will re upload the page shortly with changes to add ids (including inputs). I am not sure why the wrap in Opera and Safari but will take a look to see if it can be fixed.
The style switcher is on the cards.
(19.11.2005, 12:58)

Markus, fixed (I hope). You can now click on the labels including lastname, firstname etc. I have removed the unstyled form as this would duplicate ids.
(19.11.2005, 13:13)

@Stu: an entry you can expect shortly, fully styled of course.
(20.11.2005, 06:11)

Steve Williams:-
Still wraps in Safari and Opera. See screenshots: and
(22.11.2005, 00:23)

Steve, I have checked it out using Opera v8.5 and it looks ok. But I will try something else.
(22.11.2005, 09:05)

Now fixed in Opera and Safari, I hope.
(22.11.2005, 23:35)

Thanks for adding my form-css! btw. Stu, what I have missed were <p> tags surrounding the e.g. "... more personal information..." part. They could help to separate the text from labels/inputs or if somebody wants to give a different background-color or -img to certain fieldsets...
(24.11.2005, 11:44)

Ow, I just found this site. Am currently learning CSS and this site is the most inspiring site I have come across since Zen CSS. Many many thanks.
(06.12.2005, 16:27)

In your example: The bottom padding (between the submit button and the outer bottom of the form seems to differ between Moz FF and IE 6 WIN.
(18.12.2005, 13:43)

@ Stu: I send you per e-mail (stu(at) my submission 'shades of red' for the form with style. Have you received it?
(18.01.2006, 15:41)

@ Stu:

thx again for putting up the form.

My WIN XP language is Dutch though resulting in the reset button to be translated in Dutch as 'Herinitialiseren' but not the submit since it has a value="submit"

solve it?

<input id="button2" type="reset" value="Reset" />
(19.01.2006, 06:27)

Hey Stu, great site.
One thing from on IE, You give your input tags a background, and silly IE--i hate it--adds this to the radio buttons/checkboxes. what i do is create a global class where I apply the background, i apply this only to the input fields.
(02.03.2006, 14:43)

Hello Stu, im kinda new to CSS and i found this site very inspiring..i'd like to know if its possible to get the code of some of your examples, like the css for the simple and grey form..

thx in advance
(07.07.2006, 11:12)

Amazing play with css!

I used parts of this form, and in my page the displayed textarea is not null, but includes some invisible characters (blanks? - in your page it is null). Any idea how to present a completely empty = null textarea?

Many thanks!
(05.11.2006, 21:18)

Efrat, make sure that the closing </textarea> is on the same line as the opening <textarea> and there is no gap between the two.
<textarea name="current_medication" tabindex="40" cols="40" rows="10"></textarea>
(05.11.2006, 22:03)

Amazing, (Second) problem solved!!

Thank you so much!

(05.11.2006, 23:23)

I am using forms on my site and for some reason the fieldset border collapes in Mac Safari. In other words it doesn't extend all the way down past the bottom of the form.

Any idea as to why that would be?


(27.12.2006, 02:44)

Cara Herchenrother:-
@stu or whoever can anser
Hey, this may be a DUMB question, but i set it up how i wanted and put it directly into the "div" on my site ( It all worked fine, but where to i specify where to send the results (aka my email
(05.01.2007, 21:33)

Cara, the method you are using should work, but it is not ideal. These comments for instance have a similar action in that they email the information to me and also save it in a database that is used to print this page. The form starts <form method="post" action="comments.php"> and when you click 'Post Comment' it runs the comments.php script that does a lot of checking of the form comment before posting it to the database and sending me a copy.
There are many free php scripts on the internet that can be used in this way.
(05.01.2007, 22:06)

Hi Stu

I am busy learning to style a form using your site. But I found out about something that I wanted to ask you.

I looked at the Blueshades version of styling a form and I wondered if it's possible to style the hover in an option-group.

I see you designed the background of each option but when you hover this selection it will be just dark blue with white characters. Is it possible to make this 'hover' for example red with black characters.

Hope you understand me ;-)
(07.02.2007, 13:53)

Thanks a lot for the form!


(17.10.2007, 09:53)

I like the usage of label + input fields here, creating what one would often normally use a table for. However, I have found that it doesn't work very well when the label is long enough that it ends up wrapping. Perhaps one shouldn't have really long labels, but sometimes it is difficult to have short labels. I've tried different techniques, but since the label is being floated, it doesn't force the block the INPUT field is in to expand. Ultimately I gave up and just went back to a table, but it'd be nice if could actually support wrapping labels.
(17.10.2007, 20:17)

Is there anyone who could give me a sample (or even all?) of the counterpart php.file for this form?

So that I can adapt it for my purposes without spending weeks. (seriously)

I know html and css quite well but I am really bad in php.

If so, could you please mail it to me at: info(*)
Please change (*) for @

Thank you all very much in advance!
(01.06.2008, 12:41)

ok I made it with the kind help of the members of forum. No more need for help.
(04.06.2008, 06:10)

Sophie Edwards:-
I'm not computer literate on details, but where do I put in the html where to send the for information to? the exact spot in the HTML as I'm at web designing for dummies stage.
(05.12.2008, 00:23)

Really amazing - but not straightforward for a CSS novice.
I noticed that the select element in IE7 is not rendered as a standard dropdown listbox. As this is exactly what I'm looking for I wonder where this formatting comes from. I was not able to find out and appreciate your guidance.
(17.06.2009, 15:01)

It is really hard to make this work on screen readers.
(23.02.2014, 14:30)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page