Usunięcie wcięcia tekstu z wybierz (Windows)

Question

Potrzebuję rozwiązanie w różnych przeglądarkach, aby usunąć dopełnienie/wcięcie tekstowe natywnych pól wyboru. Wydaje się, że użycie padding: 0 nie usuwa go całkowicie.

Oto zrzut ekranu z Chrome, bez miejsca na tekst po lewej stronie:

A oto zrzut ekranu z Firefoksa, który ma trochę miejsca tekst po lewej stronie:

Należy jednak również usunąć dopełnienie np. Edge/IE11/Safari, itd. Nie powinno to być więc rozwiązanie typu "tylko Firefox", a raczej rozwiązanie oparte na różnych przeglądarkach.

Oto kod:

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

To kombinacja niektórych odpowiedzi, komentarzy i mojego własnego hackowania IE11. Przetestowałem go w IE11, EDGE, Chrome, Firefox (Windows) i Safari 10 (MacOS) i to działa:

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

Nie możemy używaj także hackowania Edge Edge for Firefox, ponieważ spowoduje to również spadek marginesu na liście rozwijanej. I nie możemy używać hackowania Firefoksa w IE11 i Edge, ponieważ nie zadziała.

Dziękuję wszystkim za pomoc!

Answer 2

Ta dodatkowa spacja Firefox jest dodawana przez silnik renderowania przeglądarki. Wyświetlanie elementów formularza jest niespójne w różnych przeglądarkach iw tym przypadku nie jest określane przez CSS.

To może pomóc:

article from Mozilla explaining some ways to mitigate select box incosistency

Smashing Magazine(It's about styling form elements)

Answer 3

To nie jest najczystszym rozwiązanie, ale działa:

oprócz resetowanie padding na 0, można użyć właściwość text-indent i ustaw różne wartości dla różnych przeglądarek.

Wygląda na to, Safari i Chrome są dobre, ale Firefox i krawędź są wyłączone przez 2px, więc można przesunąć je w lewo o 2px w FF i IE tylko tak:

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

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

Ci obejmuje główną przeglądarkę , sprawdź na browserhacks.com, jeśli uważasz, że musisz kierować reklamy na inne przeglądarki, urządzenia itp.

Nadzieję, że pomaga.

---

według browserhacks.com wygląda inny sposób kierowania IE/EDGE ≥ 10 jest _:-ms-input-placeholder, :root .selector

więc można dodać:

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

To wydaje się działać dla mnie nadzieja, że ​​działa teraz także dla ciebie.

fiddle

fiddle with new IE updates

Answer 4

To jest trochę obejście i wymaga warunkowe oparte na przeglądarce. Uważam za mało prawdopodobne, aby dostępne było prawdziwe rozwiązanie dla różnych przeglądarek.

Umieść zaznaczenie wewnątrz elementu kontenera. Daj temu kontenerowi overflow z hidden i przesuń niektóre piksele w lewo. Wymagałoby to możliwości uruchomienia nieco innego CSS dla IE/Edge (oba działają tak samo), Firefox i Chrome (który działa z oryginalnym kodem).

następujące prace zarówno dla IE11 i 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>

Dla Firefox, użyj margin-left: -4px

Here's the fiddle for IE/Edge

Answer 5

to i całą masę innych niespójności przeglądarka być obsługiwane przy użyciu pliku "reset css". Jednym z najbardziej popularnych, a jeden używam na wszystkich moich projektów jest „normalize.css”: https://necolas.github.io/normalize.css/

Ta niewielka ilość dodatkowego css zapewnia, że ​​wszystkie przeglądarki renderowanie treści takie same (jak można osiągnąć , przynajmniej).

To, co zrobi to, aby rozwiązać problem w twoim konkretnym przypadku, to użyj reguł tagowania norm <select>, aby zapewnić, że dopełnienie, wysokość linii, wcięcie (itd.) Jest ustawione spójnie we wszystkich przeglądarkach. Następnie, gdy później będziesz ominąć jego własne style css - w tym przypadku: padding:0; margin:0; pojawi się w ten sposób we wszystkich docelowych przeglądarkach.

Mam nadzieję, że to pomoże. Normalize.css to jedno z tych narzędzi, które chciałem odkryć wcześniej, kiedy po raz pierwszy się o tym dowiedziałem. Rozwiąże także problemy z układem, które jeszcze nie zostały napotkane, zanim je otrzymasz.