删除选择框中的空格

我在表单中有几个输入字段。我给他们所有的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：

我也shecked变焦和它的100％。

来源

2016-08-17 Benjamin

请提供代码，其中你的问题是可再现的。 – andreas

您是否尝试添加负值margin-left：-5px; ？ – fernando

设置负边距只会将整个选择框移到左侧。 – Benjamin

它有一些与浏览器呈现自己的东西待办事项。在同样的问题上看到这个答案更多的信息：Text Padding in Select Boxes

总之，你不应该这样做或不共同。

来源

2016-08-17 11:30:27 Quackerjack

谢谢，那篇文章正好描述了我看到的效果。太糟糕了，就是这样寿：（ – Benjamin

是的，你可以尝试@Jeni解决方案，但它不会保存，它会产生预期的结果无处不在 – Quackerjack

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

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

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

请参阅本link

来源

2016-08-17 11:31:36 Jeni

嗨，我试过外观属性，但不幸它确实删除了一切，但这恼人的位空间:)阅读其中一个建议的链接显然它不能被删除，我必须使用解决方法.. – Benjamin

删除选择框中的空格

回答

相关问题