Question

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

以下是Chrome的屏幕截图，左侧没有文字空间：

这是Firefox的截图，左侧有一些文本空间：

然而，它也应该去除例如填充物中的填充物。 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>

小提琴：https://jsfiddle.net/cbkopypv/1/

Answer 1

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

除了将填充重置为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 2

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

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

以下适用于IE11和Edge：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Here's the fiddle for IE/Edge

Answer 3

这是一些答案，评论和我自己的IE11黑客的组合。我已经在IE11，Edge，Chrome，Firefox（Windows）和Safari 10（macOS）中对它进行了测试，它可以运行：

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

小提琴：https://jsfiddle.net/cbkopypv/13/

我们无法使用Edge＆amp; amp;的margin黑客攻击IE11也适用于Firefox，因为它也会导致下拉列表的负余量。我们无法在IE11和Edge中使用Firefox的text-indent黑客，因为它无法正常工作。

感谢大家的帮助！

Answer 4

Firefox中的这个额外空格是由浏览器的渲染引擎添加的。表单元素呈现在浏览器中不一致，在这种情况下不由CSS确定。

这可能会有所帮助：

article from Mozilla explaining some ways to mitigate select box incosistency

Smashing Magazine(It's about styling form elements)

Answer 5

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

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

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

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

从select中删除文本缩进（Windows）

5 个答案: