Удаление отступа текста от выбора (Windows)
Мне нужно кросс-браузерное решение для удаления отступов/отступов текста для собственных полей выбора. Использование padding: 0
, похоже, не полностью удаляет его.
Вот скриншот Chrome, без текстового пространства на левой стороне:
![Chrome]()
И вот скриншот Firefox, у которого есть текстовое пространство в левой части:
![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>
Ответы
Ответ 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 - один из тех инструментов, которые я хотел бы узнать ранее, когда я впервые узнал об этом. Он также решит проблемы с макетами, с которыми вы еще не сталкивались, прежде чем вы их получите.