Vraag Android Dropdown (Select) CSS


Ik schrijf momenteel een aantal stylesheets voor mobiele browsers en ben een vreemd probleem tegengekomen in de Android-browser. Bij het wijzigen van het CSS-attribuut van een tekstvak wordt het vak groter om de grotere tekst te kunnen bevatten. Dit doen op een selectiekader verandert echter niets aan de grootte van het selectievak, maar de tekst wordt nog steeds groter (overlappende boven- en onderkant van het gerenderde formulierelement).

Kan iemand mij vertellen of het mogelijk is om de hoogte van geselecteerde vakjes in de Android-browser te vergroten? Of laat me niet wijzen in de richting van een lijst met CSS-kenmerken die daarop kunnen worden toegepast.

Bedankt.


15
2017-08-17 15:51


oorsprong


antwoorden:


Dit lijkt een browserbug te zijn. Je kunt het ook reproduceren wanneer je de tekstgrootte van je browser instelt op 'enorm' (in instellingen). Ik heb er een toegevoegd nieuw probleem en stel nu een tijdelijke oplossing voor met een aangepaste achtergrondafbeelding:

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

6
2017-08-18 12:29



Een andere optie die u kunt gebruiken (getest op Galaxy S met Android-versie 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;
}

Op deze manier zien de ingangen en de selecties er allemaal hetzelfde uit, klikken op de select opent het optiemenu zoals gebruikelijk.


30
2017-10-21 10:08



probeer deze:

select{

    -webkit-appearance: menulist-text;
}

4
2017-12-23 10:27



Zet de dekking van het select besturingselement op 0

Plaats vervolgens een span contorl-opgemaakt om er uit te zien als een tekstvak achter het select-besturingselement, zodat het select-besturingselement direct bovenop de reeks zit.

De gebruiker ziet het select besturingselement niet maar wanneer de gebruiker probeert tekst in te voeren in de reeks, verschijnen de vervolgkeuzemenu's voor het select besturingselement.

Nadat de gebruiker zijn selectie heeft gemaakt, gebruikt u JavaScript om de innerHTML van de reeks bij te werken met de waarde van de select control.

Zorg ervoor dat de afmetingen van de overspanning en het select besturingselement goed zijn uitgelijnd. (Gebruik geen echte texbox-besturing)

mealaroni.com


1
2018-04-30 20:13



Voor mij "-webkit-uiterlijk: listbox;" lost het probleem niet helemaal op.

Ik moest bovendien een padding-attribuut toevoegen:

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

0
2018-02-02 15:57