Very low level HTML issue- Add padding to text in a select option

Question

I am attempting to build a select box with options that require minor formatting and am running into issues.

an example of what I am looking for in an option text:

title      (some content)
title-2nd  (other content)

And while I have formatted the text in the option elements to look like the text above all my extra spaces seem to be truncated when it is rendered.

actual html:

<option value="1">1st Option       (0, 0, 0) </option>
<option value="5">Default Option   (0, 0, 0) </option>
<option value="6">Other            (0, 0, 0) </option></select>

Again, when rendered in HTML the spaces are gone and all the text is just aligned left and single spaced.

I know there are javascript replacements for the select, but would like to avoid if possible.

Is there a special char I can use (  didn't work)

Thanks in advance. (Hope this made sense)

EDIT: So there have been a few mentioning using javascript components to replace the select, and I do know how that works but would like to avoid it.

Adding some screen shots to show the difference between what I am seeing in jsFiddle and codepen vs what I am seeing locally

markup

Again, any help would be greatly appreciated

@AhbapAldirmaz, same result as I will get a fiddle up in a minute — QBM5, Mar 08 '16 at 14:48
Maybe this can be helpful http://stackoverflow.com/questions/195270/professional-jquery-based-combobox-control — Claudio King, Mar 08 '16 at 14:54
Funny enough $nbsp; works in jsFiddle, but not for me locally — QBM5, Mar 08 '16 at 14:56
Well I dont know what is going on. What I am trying seems to work other places, just for me in my solution, thanks for hte help — QBM5, Mar 08 '16 at 15:26

score 2 · Answer 1 · answered Mar 08 '16 at 15:13

2

Maybe try   instead of &emsp;

Like this

answered Mar 08 '16 at 15:13

Vincent G

8,547
1
18
36

Eric Phillips · Accepted Answer · 2016-03-08T15:39:21.537

1

form fields are notoriously difficult to style, especially elements like <select> and <option>.

MDN - Styling HTML forms

your idea to use a special character can work though. you can tabulate the options yourself using em spaces like so.

EDIT: too new to comment ^__^

did you define your character set in the header of your HTML?

try adding <meta charset="utf-8"> in your header. it's likely included in Codepen and JSFiddle. I'm thinking maybe your browser doesn't know your local copy wants to use Unicode characters.

edited Mar 08 '16 at 15:39

answered Mar 08 '16 at 14:56

Eric Phillips

131
6

I see that your solution is working in the code pen, but it is not working locally. I will add a screenshot to my original question to show what i mean – QBM5 Mar 08 '16 at 15:01

Very low level HTML issue- Add padding to text in a select option

2 Answers2