html - 如何使用 CSS 将选择下拉列表中的文本对齐方式移向顶部和左侧？

Question

我正在尝试使用 JavaScript 和 CSS 在类似电子表格的表格顶部显示下拉菜单，但在对齐方面遇到了问题。我已将所有边框、边距和填充设置为零，但是我无法确定如何将文本(默认文本，在显示下拉列表之前)移动到左上角。我已经使用 text-indent: -3px; 让它向左移动，但是有 3px-5px 间隙(使用 background-color 可以清楚地看到: #888888; 而不仅仅是选择边界的边缘)剪切左侧的文本。

有谁知道如何将基于选择的 HTML 下拉菜单的文本位置移动到左上角？

编辑:

从 Chrome 添加计算样式以演示文本框和带屏幕截图的下拉列表之间的区别。

文本框 CSS:

-webkit-border-image: none;
-webkit-line-break: after-white-space;
-webkit-nbsp-mode: space;
-webkit-user-modify: read-write;
border-bottom-color: rgb(37, 66, 100);
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-style: none;
border-top-width: 0px;
color: rgb(37, 66, 100);
cursor: auto;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 18px;
left: 204px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
top: 21px;
white-space: pre;
width: 73px;
word-wrap: break-word;
z-index: 99;

选择 CSS:

-webkit-appearance: menulist-button;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: none;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(37, 66, 100);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(37, 66, 100);
cursor: default;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 16px;
left: 281px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: -3px;
text-shadow: none;
text-transform: none;
top: 22px;
white-space: pre;
width: 135px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 99;

文本框截图: 选择截图:

Answer 1

我和你有同样的情况......遗憾的是我唯一能想到的有助于更正确地对齐文本的是添加: 

<select name='something'>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
</select>