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

Question

任何人都知道是什么导致input上额外留下'填充'？检查员没有报告任何事实上导致它。不能说我之前遇到过这个问题......

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

显然，HTML代码是解决问题的关键，请点击此处：

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

编辑以添加：

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

编辑：

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

Answer 1

我认为，

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

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

使用开发者工具

时，您可以通过查看“计算样式”来查看此内容

在两者上设置box-sizing:border-box都应该修复它。

DEMO没有

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" />

DEMO With

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

CSS规范中未指定input和select等特定表单元素的样式，并且由浏览器开发人员自行决定，因此浏览器之间会有轻微的样式变化。

在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>