Android Dropdown (Select) CSS

J'écris actuellement des feuilles de style pour les navigateurs mobiles et j'ai rencontré un problème étrange dans le navigateur Android. Lorsque vous modifiez l'attribut CSS police-size d'une zone de texte, la zone devient plus grande pour accueillir le texte plus grand. Faire cela sur une boîte de sélection ne change cependant pas la taille de la boîte de sélection, mais le texte devient encore plus grand (chevauchant en fait le haut et le bas de l'élément de formulaire rendu).Android Dropdown (Select) CSS

Quelqu'un peut-il me dire s'il est possible d'augmenter la hauteur des boîtes de sélection dans le navigateur Android. Ou sinon pointez-moi dans la direction d'une liste d'attributs CSS qui peuvent leur être appliqués.

Merci.

Source

2009-08-17 roguepixel

Êtes-vous sûr qu'il n'y a pas de hauteur appliquée ailleurs, l'héritage d'une autre entrée, ou la forme, élément? –

Oui, j'en suis sûr, j'ai jeté un œil aux éléments de l'inspecteur des firebugs dans firefox pour être sûr. – roguepixel

Cela semble être un bug de navigateur. Vous pouvez également le reproduire lorsque vous définissez la taille du texte de votre navigateur sur «énorme» (dans les paramètres). J'ai ajouté un new issue et suggère une solution de contournement avec une image d'arrière-plan personnalisé pour l'instant:

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

Source

2009-08-18 12:29:26

Merci Josef, content que quelqu'un d'autre puisse reproduire le bug et pas seulement moi. Espérons qu'une solution facile peut être trouvée. – roguepixel

un peu plus d'informations de fond sur le comportement de sélection Androids peut être trouvé ici: http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4 -0-when-set-with – escapedcat

Définit l'opacité du contrôle de sélection à 0

Ensuite, placez un contorl span style pour ressembler une zone de texte derrière le contrôle de sélection afin que le contrôle de sélection se trouve directement au-dessus de la plage.

L'utilisateur ne verra pas le contrôle de sélection mais lorsque l'utilisateur tentera d'entrer du texte dans la plage, les options de liste déroulante pour le contrôle de sélection apparaîtront. Après que l'utilisateur fait sa sélection, utilisez javascript pour mettre à jour le innerHTML de l'étendue avec la valeur du contrôle de sélection.

Assurez-vous que les dimensions de la plage et de la commande de sélection s'alignent bien. (Ne pas utiliser un contrôle de TexBox réelle)

mealaroni.com

Source

2010-04-30 20:13:57 Bjhamltn

Une autre option que vous pouvez utiliser (testé sur la version en cours d'exécution Android Galaxy S 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; 
}

De cette façon, les entrées et sélectionne le même aspect, en cliquant sur le bouton sélectionner ouvrira le menu des options comme d'habitude.

Source

2010-10-21 10:08:08 Dror

la propriété -webkit-appearance est ce qui l'a corrigé pour moi. Merci! – imorsi

Merci, sauvé soit le temps :) – simoncereska

merci - travaillé pour moi aussi – Martin

essayer celui-ci:

select{ 

    -webkit-appearance: menulist-text; 
}

Source

2012-12-23 10:27:24

Cela résout en fait beaucoup de problèmes avec la hauteur et la largeur des entrées de sélection dans tous les appareils webkit. Certains ont suggéré "menulist-button" mais celui-ci semble fonctionner partout. Merci! – marksyzm

vous êtes les bienvenus !!! –

Pour moi "webkit-apparence: listbox;" résolu le problème pas complètement.

je dû ajouter un attribut de remplissage plus:

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

Source

2014-02-02 15:57:25 Marcus

Android Dropdown (Select) CSS

Répondre

Questions connexes