从 select (Windows) 移除文本缩进

Question

我需要一个跨浏览器的解决方案来删除本机 select 字段的 padding/text 缩进。使用 padding: 0 似乎并没有完全删除它。

这是 Chrome 的屏幕截图，左侧没有文字 space：

这是 Firefox 的屏幕截图，左侧有一些文字 space：

但是，它也应该删除填充，例如Edge/IE11/Safari，等等。所以它不应该是一个 Firefox 唯一的解决方案，而是一个跨浏览器的解决方案。

代码如下：

select {
  font-size: 18px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  width: 100%;
  background-color: red;
  color: #000000;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border-color: #000000;
  border-width: 0 0 1px 0;
  border-style: solid;
}

option {
  padding: 0;
}

<select>
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
  <option value="test3">Test 3</option>
</select>

Fiddle: https://jsfiddle.net/cbkopypv/1/

Answer 1

firefox 中的这个额外的空格是由浏览器的渲染引擎添加的。表单元素渲染在浏览器之间不一致，在这种情况下不是由 CSS.

决定的

这可能有帮助：

article from Mozilla explaining some ways to mitigate select box incosistency

Smashing Magazine(It's about styling form elements)

Answer 2

这不是最干净的解决方案，但它有效：

除了将填充重置为 0 之外，您还可以使用 text-indent 属性并为不同的浏览器设置不同的值。

看起来 Safari 和 Chrome 不错，但是 Firefox 和 Edge 偏移了 2px，所以你可以在 FF 和 IE 中将它们向左移动 2px，就像这样：

// firefox
@-moz-document url-prefix() { 
  select {
    text-indent: -2px
  }
}

// Edge
@supports (-ms-ime-align: auto) {
  select {
    text-indent: -2px
  }
}

这些涵盖了主流浏览器，如果您认为需要针对其他浏览器、设备等，请查看 browserhacks.com。

希望对您有所帮助。

根据 browserhacks.com 看起来另一种定位 IE/Edge ≥ 10 的方法是 _:-ms-input-placeholder, :root .selector

因此您可以添加：

_:-ms-input-placeholder, :root select {
    text-indent:-2px
}

这似乎对我有用，希望现在对你也有用。

fiddle

fiddle with new IE updates

Answer 3

这是一种解决方法，需要基于浏览器的条件。我发现不太可能有真正的跨浏览器解决方案可用。

将 select 放在容器元素中。为该容器提供 hidden 的 overflow 并将 select 向左移动一些像素。这将要求您能够运行稍微不同 CSS IE/Edge（两者工作相同），Firefox 和 Chrome（与您的原始代码一起工作）。

以下适用于 IE11 和 Edge：

select {
  font-size: 18px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  width: 100%;
  background-color: red;
  color: #000000;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border-color: #000000;
  border-width: 0 0 1px 0;
  border-style: solid;
  margin-left: -2px;
}

option {
  padding: 0;
}

.container {
  overflow: hidden;
}

<div class="container">
  <select>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
  </select>
</div>

对于 Firefox，使用 margin-left: -4px

Here's the fiddle for IE/Edge

Answer 4

可以使用 'css reset' 文件来处理这个问题和一大堆其他浏览器的不一致问题。 'normalize.css' 是最受欢迎的之一，也是我在所有项目中使用的一个： https://necolas.github.io/normalize.css/

这一小部分额外 css 可确保所有浏览器呈现相同的内容（至少可以实现）。

在您的具体情况下，这将解决问题的方法是使用 normalize 的 <select> 标记规则来确保填充、行高、缩进（等）设置为在所有情况下一致显示浏览器。然后，当您随后使用自己的 css 样式对其进行过度统治时 - 在这种情况下： padding:0; margin:0; 它会在所有目标浏览器中以这种方式显示。

希望对您有所帮助。 Normalize.css 是我希望在我第一次发现它时早点发现的工具之一。它还将在您遇到之前解决您尚未遇到的布局问题。

Answer 5

这是一些答案、评论和我自己的 IE11 hack 的组合。我已经在 IE11、Edge、Chrome、Firefox (Windows) 和 Safari 10 (macOS) 中对其进行了测试并且它有效：

.select-container {
  overflow: hidden;
}

select {
  font-size: 18px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  width: 100%;
  background-color: red;
  color: #000000;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  border-color: #000000;
  border-width: 0 0 1px 0;
  border-style: solid;
}

option {
  padding: 0;
}


/* Firefox: */

@-moz-document url-prefix() {
  select {
    text-indent: -2px;
  }
}


/* Edge: */

@supports (-ms-ime-align: auto) {
  select {
    width: calc(100% + 4px);
    margin-left: -4px;
  }
}


/* IE11: */

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
  select {
    width: calc(100% + 4px);
    margin-left: -3px;
  }
}

<div class="select-container">
  <select>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
  </select>
</div>

Fiddle: https://jsfiddle.net/cbkopypv/13/

我们也不能对 Firefox 使用 margin Edge 和 IE11 的 hack，因为它也会导致下拉菜单出现负边距。我们不能在 IE11 和 Edge 中使用 Firefox 的 text-indent hack，因为它不起作用。

感谢大家的帮助！

从 select (Windows) 移除文本缩进

Remove text indentation from select (Windows)

html

css

native

drop-down-menu