How do I put a space character before option text in a HTML select element?

Question

In a drop down list, I need to add spaces in front of the options in the list. I am trying

<select>
<option>&#32;&#32;Sample</option>
</select>

for adding two spaces but it displays no spaces. How can I add spaces before option texts?

Answer 1

& n b s p ; (edit: without the spaces.. the first time it just rendered a space :) ) Can you try that? Or is it the same?

Answer 2

Isnt &#160 the entity for space?

<select>
<option>&#160;option 1</option>
<option>    option 2</option>
</select>

Works for me..

EDIT:

Just checked this out, there may be compat issues with this on older browsers, but all seems to work fine for me here. Just thought I should let you know as you may want to replace with  

Answer 3

I think you want   or  

So a fixed version of your example could be...

<select>
  <option>&nbsp;&nbsp;Sample</option>
</select>

or

<select>
  <option>&#160;&#160;Sample</option>
</select>

Answer 4

& nbsp;

and

 

both worked. I thought nbsp is the same as & # 32. Thanks.

Answer 5

I'm nearly certain you can accomplish this with CSS padding, as well. Then you won't be married to the space characters being hard-coded into all of your <option> tags.

Answer 6

@Brian

I'm nearly certain you can accomplish this with CSS padding, as well. Then you won't be married to the space characters being hard-coded into all of your tags.

Good thinking - but unfortunately it doesn't work in (everyone's favourite browser...) IE7 :-(

Here's some code that will work in Firefox (and I assume Op/Saf).

<select>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
            <option style="padding-left: 10px;">Blah</option>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
</select>

Answer 7

As Rob Cooper pointed out, there are some compatibility issues with older browsers (IE6 will display the actual letters "& nbsp;"

This is how I get around it in ASP.Net (I don't have VS open so I'm not sure what characters this actually gets translated to):

Server.HtmlDecode(" ") 

Answer 8

You can also press alt+space (on mac) for a non-breaking space. I use it for a Drupal module because Drupal decodes html entities.