删除选择框中的空格[重复]答案

【问题标题】：remove space in select box [duplicate]删除选择框中的空格[重复]
【发布时间】：2016-08-17 11:09:57
【问题描述】：

我在一个表单中有几个输入字段。我给了它们一个 5px 的填充，但选择框内部似乎有一个额外的空间。它不是由填充、边距或文本缩进引起的。左对齐文本。有没有办法摆脱这个？

下面是我的代码。底部是指向小提琴的链接。

CSS

input[type=text],
select {
    padding:5px;
}
select {
    border:solid 1px #555;
    padding:5px;
}

HTML

<div>
    <select>
        <option>Test1</option>
        <option>Test2</option>
        <option>Test3</option>
        <option>Test4</option>
    </select>
</div>
<div>
    <input type="text" value="Test" />
</div>

https://jsfiddle.net/64ppa5f5/

PS：

我还取消了缩放，它是 100%。

【问题讨论】：

请提供您的问题可重现的代码。
你试过加负边距吗-left:-5px; ?
设置负边距只会将整个选择框向左移动。
试试 thi style="border: none;background-color: white;"
只去掉边框，留出空间

标签： html css

【解决方案1】：

它与浏览器渲染本身有关。有关更多信息，请参阅同一问题的此答案：Text Padding in Select Boxes

总而言之，你不应该这样做或不常见。

【讨论】：

谢谢，那篇文章准确地描述了我看到的效果。太糟糕了，就是这样:(
是的，您可以尝试@Jeni 解决方案，但它不会在任何地方产生预期的结果。

【解决方案2】：

您看到的填充来自浏览器特定的样式表。要删除选择框中的空格，请添加以下样式。

input[type=text],
 select {
   padding:5px;
 }

 select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:solid 1px #555;
    border-radius:3px;
    padding:5px;
 }

参考这个link

【讨论】：

您好，我尝试了外观属性，但不幸的是，它确实删除了所有内容，除了那个烦人的空间:)。阅读其中一个建议的链接，显然它无法删除，我必须使用解决方法..