Menu rozwijane z Androidem (wybierz) CSS

Question

Obecnie piszę niektóre arkusze stylów dla przeglądarek mobilnych i natknąłem się na dziwny problem w przeglądarce Androida. Podczas zmiany atrybutu CSS rozmiaru czcionki w polu tekstowym pole staje się większe, aby pomieścić większy tekst. Wykonanie tego w polu wyboru nie zmienia jednak rozmiaru pola wyboru, ale tekst jest nadal większy (w rzeczywistości pokrywa się on z górą i dołem renderowanego elementu formularza).

Czy ktoś może mi powiedzieć, czy można zwiększyć wysokość wybranych skrzynek w przeglądarce Androida. Lub jeśli nie wskaż mi w kierunku listy atrybutów CSS, które można do nich zastosować.

Dzięki.

Answer 1

Wygląda na to, że to błąd przeglądarki. Możesz go również odtworzyć, gdy ustawisz rozmiar tekstu przeglądarki na "ogromny" (w ustawieniach). Dodałem new issue i sugerują obejście z tłem niestandardowego obrazu teraz:

<select style="background: url('big-select-bg.png')"/> 

Answer 2

Ustaw krycie wyboru sterowania do 0

Następnie umieścić contorl rozpiętości stylem wyglądać pole tekstowe za formantem wyboru, tak aby kontrola wyboru znajdowała się bezpośrednio na górze zakresu.

Użytkownik nie zobaczy kontrolki wyboru, ale gdy użytkownik podejmie próbę wprowadzenia tekstu do zakresu, pojawią się opcje rozwijane dla kontrolki wyboru.

Po dokonaniu wyboru przez użytkownika należy użyć javascript, aby zaktualizować innerHTML zakresu przy użyciu wartości kontrolki select.

Upewnij się, że wymiary przęsła i linii kontrolnej wyboru są odpowiednio ustawione. (Nie używaj rzeczywistą kontrolę texbox)

mealaroni.com

Answer 3

Inną opcją można użyć (testowane na Galaxy S z systemem Android w wersji 2.1 update1):

select { 
    -webkit-appearance: listbox; 
} 
select, input { 
    width: 100%; 
    height: 40px; 
    line-height:40px; 
    border: 1px solid #999; 
    border-radius: 6px; 
    margin-bottom:10px; 
} 

ten sposób wejść i wybiera wszystkie wyglądają tak samo, kliknięcie przycisku wyboru otwiera menu opcji jak zwykle.

Answer 4

spróbować tego:

select{ 

    -webkit-appearance: menulist-text; 
} 

Answer 5

za mnie "-webkit-WYGLĄD: listbox;" rozwiązać problem nie do końca.

musiałem dodać atrybut dopełnienie Dodatkowo:

select { 
    -webkit-appearance: listbox; 
    width: 100%; 
    height: 35px; 
    line-height: 35px; 
    border: 1px solid #bbb; 
    border-radius: 4px; 
    padding: 0 0 1px 8px; 
}