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

Answer 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.

Answer 2

Maybe try   instead of  

Like this