html 文本选择框,html – 选择框中的文本填充

我刚刚遇到一个晦涩的问题，选择框在文本附近有更多的空间，似乎不是框模型的一部分。这是我的意思的两张照片：

select, input

{

padding:0px;

font-size:20px;

}

select.textIndent

{

text-indent:-1.5px;

}

select.paddingOffset

{

padding-left:2.5px;

}

input.paddingOffset

{

padding-left:5px;

}

No Padding Test

Item 1

Item 2

Item 3

Negative Text Indent

Item 1

Item 2

Item 3

Padding Offset

Item 1

Item 2

Item 3

我已经制定了两种尝试解决它的方法：通过负文本缩进或使用左填充来调整输入并选择相匹配的框。

这两种方法都不完美。 Chrome和Firefox的负文本缩进之间存在差异，如果选择和输入一个接一个排列，则会导致明显的空间。尝试补偿填充可以使您保留各种输入的样式，并选择字段有些困难，您应用一定比例的填充。

我首先在客户的网站上注意到这个字的一部分被切断了，但是如果空的空间不在那里，这个词看起来就适合。

虽然我可以为我的客户端解决这个特定的问题(例如，更宽的选择框，更少的填充)，我想知道是否有一个不同的解决方案来隐藏/补偿/删除左边/右边的“其他”填充文本。是否有另一个CSS属性我应该看看？

我有一种感觉，这可能只是选择框工作，但希望SO的集体配偶证明我错了。

编辑1

我希望解决方案将是纯CSS。我知道如果我使用一个插入替换选择框使用JS库，它将不会有同样的问题。

编辑2

只是为了更好地澄清我以后，选择框有一个额外的填充在盒子模型之外。下面的图片显示选择框的6px和输入的〜3px。我想要控制这个特定的填充或完全删除它。我已经尝试使用文本缩进，并使用填充偏移来对齐输入中的文本并选择元素，但这两个都看起来很骇人听闻。我认为这样做有一个更好的CSS方式。