从select中删除文本缩进(Windows)

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

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

\n\n

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

\n\n

看起来 Safari 和 Chrome 不错，但 Firefox 和 Edge 偏离了 2px，所以你只能在 FF 和 IE 中将它们向左移动 2px，如下所示：

\n\n

// firefox\n@-moz-document url-prefix() { \n  select {\n    text-indent: -2px\n  }\n}\n\n// Edge\n@supports (-ms-ime-align: auto) {\n  select {\n    text-indent: -2px\n  }\n}\n

\n\n

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

\n\n

希望有帮助。

\n\n\n\n

据browserhacks.com看来，针对 IE/Edge \xe2\x89\xa5 10 的另一种方式是_:-ms-input-placeholder, :root .selector

\n\n

所以你可以添加：

\n\n

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

\n\n

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

\n\n

小提琴

\n\n

摆弄新的 IE 更新

\n

Answer 2

这是一些答案、评论和我自己的 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>

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

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

感谢大家的帮助！