confused about font sizes in forms

[lightheaded]

Hi,

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?

[Robin_reala]

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" />

[lightheaded]

That's great. Thanks for your help