Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

confused about font sizes in forms

9:32 am on Feb 7, 2007 (gmt 0)

New User

10+ Year Member

joined:Sept 23, 2006
votes: 0


I am having problems setting the font size for input, select, textarea etc. to look the same as the corresponding label but have noticed that if I use for example...

label, input {
font-size 0.9em;

<label for="example"><input type="text" name="example"></input></label>

The "input" font size appears smaller than the "label" font size. It seems like "input" has inherited the font size from "label" and scaled it down.

Is there a simple way round this without attaching an individual id/class to each input?

9:45 am on Feb 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
votes: 0

Your rules says that both labels and inputs should be 90% of the font-size of their parent. Because youíre nesting your inputs inside a label the input ends up being .9em of the labelís .9em - i.e. .81em of the labelís parent. Thereís a couple of ways around this:

1) Reset the font-size of the input when itís inside a label:

label, input { font-size: .9em; }
label input { font-size: 1em; }

2) Use explicit rather that implicit form association to get around nesting problems:

<label for="example">Example</label><input type="text" id="example" />
6:05 am on Feb 8, 2007 (gmt 0)

New User

10+ Year Member

joined:Sept 23, 2006
votes: 0

That's great. Thanks for your help