html - 删除选择框中的空间

标签 html css

<分区>

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

enter image description here

下面是我的代码。底部是 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/

附言:

我还检查了缩放,它是 100%。

最佳答案

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

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

关于html - 删除选择框中的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38994982/

相关文章:

javascript - $ ("SELECTOR").css() 的复杂度

html - Flexbox 使内容环绕

android - 带有 Html.fromhtml 的 div 标签

html - 奇怪的人工制品在我的面包屑中仅显示一个前后伪选择器

javascript - 将 AJAX 响应文件显示到 View 中

ios - XCODE/SK SpriteKit/如何让我的 Sprite 移动

css - 所有组件的 Angular 全局 css

css - Google Map 导致页面的不相关部分在 Safari 中消失

javascript - jQuery Mobile 页面覆盖桌面 HTML div 布局

html - Materialise 中的响应列