非常低级别的HTML问题 - 在选择选项中向文本添加填充

Question

我正在尝试使用需要较小格式化的选项构建一个选择框，并且遇到问题。

我在选项文本中寻找的示例：

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

虽然我已经将选项元素中的文本格式化为上面的文本，但在渲染时，所有额外空格似乎都会被截断。

实际的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>

同样，当在HTML中渲染时，空格消失了，所有文本只是左对齐并且单个间隔。

我知道有选择的javascript替换，但是如果可能的话我想避免。

我可以使用特殊字符（ 无效）

提前致谢。 （希望这是有道理的）

编辑：所以有一些人提到使用javascript组件来替换select，我知道它是如何工作的但是想避免它。

添加一些屏幕截图，以显示我在jsFiddle和codepen中看到的与我在本地看到的内容之间的区别

标记

再次，非常感谢任何帮助

Answer 1

也许尝试 而不是 

Like this

Answer 2

表单字段非常难以设置样式，尤其是<select>和<option>等元素。

MDN - Styling HTML forms

你使用特殊字符的想法可以工作。您可以使用em空格like so自行制表选项。

编辑：太新了评论^ __ ^

您是否在HTML标题中定义了字符集？

尝试在标头中添加<meta charset="utf-8">。它可能包含在Codepen和JSFiddle中。我想也许你的浏览器不知道你的本地副本想要使用Unicode字符。