Android Dropdown (Auswahl) CSS

Question

Ich schreibe gerade einige Stylesheets für mobile Browser und bin auf ein seltsames Problem im Android Browser gestoßen. Wenn das CSS-Attribut für die Schriftgröße einer Textbox geändert wird, wird die Box größer, um den größeren Text aufzunehmen. Wenn Sie dies jedoch in einem Auswahlfeld tun, wird die Größe des Auswahlfelds nicht geändert, der Text wird jedoch immer größer (überlappt tatsächlich das obere und untere Ende des gerenderten Formularelements).

Kann mir jemand sagen, ob es möglich ist, die Höhe von Auswahlboxen im Android-Browser zu erhöhen. Oder wenn ich nicht in die Richtung einer Liste von CSS-Attributen zeige, die auf sie angewendet werden können.

Danke.

Answer 1

Dies scheint ein Browser-Fehler zu sein. Sie können es auch reproduzieren, wenn Sie die Textgröße Ihres Browsers auf 'groß' stellen (in den Einstellungen). Ich habe ein new issue und jetzt eine Abhilfe mit einem benutzerdefinierten Hintergrund Bild vorschlagen:

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

Answer 2

die Opazität der Auswahlsteuer Einstellung auf 0

Dann eine Spannweite contorl Ort wie gestylt aussehen ein Textfeld hinter dem Select-Steuerelement, so dass das Select-Steuerelement direkt über dem Bereich sitzt.

Der Benutzer wird das Auswahlsteuerelement nicht sehen, aber wenn der Benutzer versucht, Text in den Bereich einzugeben, werden die Dropdown-Optionen für das Auswahlsteuerelement angezeigt.

Nachdem der Benutzer seine Auswahl getroffen hat, verwenden Sie Javascript, um die innereHTML des Bereichs mit dem Wert des Auswahlsteuerelements zu aktualisieren.

Stellen Sie sicher, dass die Abmessungen der Spanne und der Auswahlsteuerung gut aufeinander abgestimmt sind.

mealaroni.com

Answer 3

Eine weitere Option (nicht eine tatsächliche texbox Steuerung verwenden) Sie (getestet auf Galaxie S mit Android-Version 2.1-update1) verwenden können:

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

diese Weise werden die Eingänge und wählt alle gleich aus. Wenn Sie auf die Auswahl klicken, wird das Optionsmenü wie gewohnt geöffnet.

Answer 4

versuchen diese:

select{ 

    -webkit-appearance: menulist-text; 
} 

Answer 5

Für mich "-webkit-Auftritt: listbox;" löste das Problem nicht vollständig.

Ich hatte zusätzlich ein Polster Attribut hinzufügen:

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