changing the font size of radio button text

I am trying to change the font-size of some radio buttons :

<input type="radio" name="rdDate" id="ShowAll" value="Show All" style="border-style:none;margin-left:0px;font-size:11px;"/>Show All
    <input type="radio" name="rdDate" id="ShowCurrent" value="Show Current" style="border-style:none;font-size:11px;"/>Show Current

But adding style="font-size:11px;" to the input tag does not change the text size. The only way I have found to do this is to wrap the text in a开发者_Go百科 font tag, but then you are limited to a font size of 1 to 7, none of which is the right size for what I require.

Does anybody know how to change the font size of a radio button text?

The text is beside the radio button, not inside it.

First, add a <label> element (make sure the for attribute matches the id of the input with which it is associated, this will link them so people will have a bigger click target and screen reader users will know which label belongs with which control).

Then style the label.

Wrap the text with a <label> tag and then you can style up this tag.

<input type="radio" name="rdDate" id="ShowAll" value="Show All" style="border-style:none;margin-left:0px;font-size:11px;"/><label style="font-size: 11px;">Show All</label>
<input type="radio" name="rdDate" id="ShowCurrent" value="Show Current" style="border-style:none;font-size:11px;"/><label style="font-size: 11px;">Show Current</label>

Also consider NOT using inline styles and use an external stylesheet.