Удаление отступа текста от выбора (Windows)

Ответ 1

Это комбинация некоторых ответов, комментариев и моего собственного взлома IE11. Я тестировал его в 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>

Ответ 2

Это не самое чистое решение, но оно работает:

В дополнение к переадресации отступа к 0, вы можете использовать свойство text-indent и устанавливать разные значения для разных браузеров.

Похоже, что Safari и Chrome хороши, но Firefox и Edge отключены на 2px, поэтому вы можете перемещать их влево на 2px в FF и IE только так:

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

скрипта с новыми обновлениями IE

Ответ 3

Это несколько обходное решение и требует условий, основанных на браузере. Я считаю маловероятным, чтобы было доступно истинное кросс-браузерное решение.

Поместите элемент выбора внутри элемента контейнера. Дайте этому контейнеру overflow hidden и вытесните 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>

Ответ 4

Этот лишний пробел в firefox добавляется механизмом рендеринга браузера. Выделение элементов формы несовместимо в браузерах, и в этом случае CSS не определяется.

Это может помочь:

статья из Mozilla, объясняющая некоторые способы смягчения несоответствия выбора окна

Smashing Magazine (о элементах формы стилей)

Ответ 5

Это и целая куча других несоответствий браузера могут быть решены с помощью файла "css reset". Один из самых популярных, и тот, который я использую для всех своих проектов, - "normalize.css": https://necolas.github.io/normalize.css/

Это небольшое количество дополнительных css гарантирует, что все браузеры отображают контент одинаково (как минимум, могут быть достигнуты, по крайней мере).

Что это будет делать для решения проблемы в вашем конкретном случае, это использовать нормализовать правила тегов <select>, чтобы гарантировать, что отступы, длина строки, отступы (и т.д.) будут установлены последовательно во всех браузерах. Затем, когда вы впоследствии переопределите его своими собственными стилями css - в этом случае: padding:0; margin:0; он появится таким образом во всех целевых браузерах.

Надеюсь, это поможет. Normalize.css - один из тех инструментов, которые я хотел бы узнать ранее, когда я впервые узнал об этом. Он также решит проблемы с макетами, с которыми вы еще не сталкивались, прежде чем вы их получите.