删除选择框中的空间 [英] remove space in select box

问题描述

我在表格中有几个输入字段.我给他们全部填充为5px，但选择框似乎在里面有额外的空间.它不是由padding，margin或text-indent引起的.保留文本对齐方式.有办法摆脱这种情况吗?

I have a few input fields in a form. I gave them all a padding of 5px but the select boxes seemingly have an additional space inside. It's not caused by padding, margin or text-indent. Text alignment is left. Is there a way to get rid of this?

这里是我的代码.底部是指向小提琴的链接.

Here follows my code. At the bottom is a link to the fiddle.

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％.

I also shecked the zoom and it's 100%.

推荐答案

它与浏览器呈现本身有关.有关更多信息，请参见同一问题的答案:选择框"中的文本填充

It has something todo with the browser rendering itself. See this answer on same question for more informations: Text Padding in Select Boxes

总而言之，您不应这样做或不常见.

In summary, you should not do this or not common.

这篇关于删除选择框中的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！