输入[type="search"] 上的神秘额外左填充

Question

有人知道是什么导致了input 上的这个额外的左侧“填充”吗？检查员没有报告实际上是什么原因造成的。不能说我以前遇到过这个问题……

顶部字段是文本input（搜索），底部字段是select

显然HTML代码是解决问题的关键，给你：

<input type="search" placeholder="Search" />
<select>
  <option value="ir35">IR35</option>
</select>

编辑添加：

我有点傻，但问题仍然存在。在试验不同的输入类型时，我创建了两个模板。问题实际上是在input[type="search"] - 不是文本。这是搜索类型的问题。但是我已经在申请-webkit-appearance: textfield 我还有什么遗漏吗？实际上没有“东西”导致填充、文本缩进、填充等。它只是“那里”。

编辑：

我的解决方案将放弃搜索以支持文本 - 这是一种解决方法，但它会做。

Answer 1

select 元素和input 元素在不同的盒子模型下运行，我相信。

box-sizing:border-box 是 select 元素的默认值。

您可以在使用开发者工具时通过查看“Computed Styles”来检查这一点

在两者上设置box-sizing:border-box 应该可以解决它。

没有演示

select,
input {
  display: block;
  width: 200px;
}

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

<input type="text" />

使用演示

select, input {
  display: block;
  width: 200px;
  box-sizing:border-box;
}

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>  

<input type="text" />

Answer 2

某些表单元素（如input 和select）的样式未在CSS 规范中指定，由浏览器开发人员自行决定，因此不同浏览器的样式会略有不同。

在 Firefox 中，您可以进行一些硬编码的样式调整来解决您看到的填充问题。

例如，如果您在输入字段中添加padding-left: 3px，则文本值将与选择框中显示的选项值对齐。

但是，由于填充不能为负数，您可以消除 select 元素中的左侧填充，尽管您可以在 option 元素中消除。

select,
input {
  display: block;
  width: 200px;
  box-sizing: border-box;
}
select {
  padding-left: 0px;
}
input {
  padding-left: 3px;
}

<input type="text" value="Option 1" />

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>