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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
phpRob
Forum Newbie
Posts: 9
Joined: Thu Feb 12, 2015 3:45 pm

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

Post 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.
Post Reply