Html 如何使用CSS将select下拉列表中的文本对齐方式向上向左移动？

我试图用JavaScript和CSS在类似电子表格的表格顶部显示一个下拉列表，但在对齐方面遇到了问题。我已经将所有边框、边距和填充设置为零，但是在下拉列表显示在左上角之前，我无法确定如何将文本移动到默认文本。我使用了文本缩进：-3px；使其向左移动，但有3px-5px间隙清晰可见，背景色为：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;

文本框的屏幕截图： 选择的屏幕截图：

---

为了排除基本问题，您是否尝试过：

   option, select {
      text-align: left;
      vertical-align: top;
   }

---

我的处境和你一样。。。遗憾的是，我能想出的唯一有助于使文本更准确地对齐的方法是添加：

---

有代码显示吗？jsfiddle？我编辑了这篇文章以显示所使用的CSS和问题的屏幕截图。文本是否用a包装？不，有困难的文本在标签中。第二个屏幕截图。仅CSS是不够的。Html css布局在浏览器、doctype、有效性、javascript干扰等诸多方面变得反复无常，无法用解决方案“精确”地确定您的情况。你能提供一个有效的例子吗？如果你用谷歌搜索“chrome html select bug”，你就会明白我需要整个html上下文来帮助你。是的，我已经试过了。我最终创建了一个伪类，它在一个div中生成一个select，在文本区域的顶部有一个div，其中包含一个背景色来阻止文本，然后是一个contenteditable div，在上面对齐-我需要通过编辑其中的文本向select添加项目的选项，尽管如此，我还是会选择一种不那么骇客的方法——令人惊讶的是，这些年来HTML控件的发展如此之少。几乎每个人都需要树状视图、多列列表、多选或可编辑下拉列表等等，但却被迫将它们组合在一起。是的，这和我得出的结论是一样的。最后，我滚动了自己的下拉列表，可以设置样式，因为我还需要其他一些东西，可以在数十万个项目中进行分页，而不会太慢、多选功能、层次列表等。下拉列表绝对是一个令人恼火的控件。

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