Page 1 of 1

Can you control size of text in <option> select dropdown?

Posted: Mon Feb 09, 2015 11:36 am
by simonmlewis

Code: Select all

<select name='amount' style='padding: 7px; background-color: #EAEAEA'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
On this, I can set the padding and background colour of the dropdown as it appears. But can you select the "padding" or other factors in the menu itself... the 1, 2 3 4...?

I don't want to go silly with it, but would be nice to increase the padding of each option.

Re: Can you control size of text in <option> select dropdown

Posted: Fri Feb 13, 2015 6:19 pm
by phpRob
I saw there were no replies yet and I was curious and it was a fairly easy thing to test. Yes, you can do it. The first option had padding with more visible space surrounding the option value in the dropdown--it was the option I tested--see code below. As an aside, the convention for html element attribute values is to wrap them in double-quotes, not single-quotes as you had in your example. It may be even a requirement for a truly compliant html5 document which uses the

Code: Select all

<!DOCTYPE html>
declaration--I've not tested that.

Code: Select all

<select name="amount" style="padding: 7px; background-color: #EAEAEA">
<option value="1" style="padding: 7px;">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I would probably opt for using jQuery to style the select tag and its options upon completion of page load on the client side if the tag was being created dynamically based on code that creates a form. If you know the tag will be in the document up front, I'd then use a a CSS stylesheet. You could save some bandwidth this way and keep the user-experience optimal by avoiding styling multiple or hundreds of option tags inline and sending them all over an internet connection.