Stylizowanie pierwszej opcji wejścia <select> na iOS

Question

Próbuję ustawić wejście select na iOS. Pierwsza opcja lub stan początkowy powinny mieć mniejszy rozmiar czcionki, ale nie resztę opcji.

Mam następującą strukturę: HTML

<select class="dropdown"> 
    <option selected="" value="Navigation">Navigation</option> 
    <option value="some-link">Whatever</option> 
    <option value="some-link">Another option</option> 
    <option value="some-link">Why</option> 
    <option value="some-link">What</option> 
</select> 

Moje CSS na to wygląda następująco:

select { 
    -webkit-appearance: none; 
    font-family: 'Custom-Font', sans-serif; 
    font-size:.5em 
    line-height:1.8em; // optical center 
    background-color: #ccc; 
    color: #333; 
    border: none; 
    padding: 6px 10px 4px 10px; 
} 

.dropdown { 
    background-image: url(img/assets.svg); 
    background-position: right 2px; 
    background-repeat: no-repeat; 
    width: 100%; 
    display:block; 
    margin-bottom:-1.5em; 

    option:not(:first-of-type) { 
     font-size:1.5em; 
    } 
} 

Menu <select> wygląda dokładnie tak, jak chcę to patrzeć. Mówi "Nawigacja" wewnątrz jasnoszarego pudełka o raczej małej czcionce.

Jednak po kliknięciu/stuknięciu select na moim iphone natywny widok interfejsu użytkownika iOS pokazuje wszystkie opcje również w bardzo małym rozmiarze czcionki.

Jak mogę po prostu ustawić opcję selected (lub samą ramkę), używając niestandardowego formatowania, ale nie opcji. Chcę, aby moje opcje miały "normalny" czytelny rozmiar czcionki.

Jakieś pomysły na ten temat? Próbowałem z option:not(:first-of-type) i zwiększałem rozmiar czcionki, ale bez efektu!

Answer 1

Niestety, nie ma sposobu, aby to zrobić. iOS Safari przejmuje pełną kontrolę nad stylizacją select zawiera "wewnętrzną zawartość". Oto referencja do weryfikacji: little link.

Jednym ze sposobów osiągnięcia tego byłoby symulowanie menu rozwijanego/wyboru przy użyciu JavaScript.

To nie jest bardzo korzystne, ale jeśli chcesz absolutnie wymagać zmiany domyślnego stylu, to obawiam się, że to jedyny sposób, aby przejść; oto wersja demo, która powinna dać ci pomysł na przeprowadzenie symulacji: another little link.

Answer 2

Za to, co warto - po zamknięciu miałem przezroczysty rozwijacz <select> z promieniem brzegu. Na iOS (nie jestem pewien co do androida, nie przetestowałem go) domyślne szare pole dla <select> pojawi się wewnątrz mojej niestandardowej granicy, co było nieatrakcyjne i niechciane.

Aby pozbyć wewnętrznej szarym polu użyłem następujące CSS:

-webkit-appearance: none; 

a jeszcze bardziej - odnoszące się do tego tematu OP. Bootstrap oferuje wygodne rozwiązanie z doskonałą dokumentacją umożliwiającą tworzenie własnych list rozwijanych za pomocą Javascript. Check it out here.

Answer 3

Spróbuj to 100% pracował dla mnie

select { 
     -webkit-appearance: none; 
     -moz-appearance: none; 
     appearance: none; 
}