Comment Changer de Sélectionner la Zone d'arrière-plan Sans Perdre la Flèche de Droite sur le navigateur Safari Mobile
J'ai besoin de changer l'arrière-plan sur ma boîte de sélection d'une télévision couleur, mais je ne veux pas la flèche vers la droite (aka la flèche de la liste déroulante) pour s'en aller.
J'ai essayé:
select {
-webkit-appearance: none;
border: 0;
background: none;
}
Cela fonctionne pour tous les navigateurs, sauf pour Safari sur mon iPhone 4s avec iOS 7. Sur ce navigateur le bouton droit de la flèche disparaît et il n'est pas précisé à l'utilisateur que c'est une boîte de sélection.
Omettant -webkit-appearance ne l'aide pas.
Je ne veux pas faire un faux flèche. Qui aura une incidence sur tous les autres navigateurs.
Des idées?
OriginalL'auteur StephenKC | 2014-09-04
Vous devez vous connecter pour publier un commentaire.
Vous n'allez pas trouver un bon cross-browser mise en œuvre pour le style de l'élément select via CSS. La meilleure solution est de créer votre propre liste déroulante via javascript et le style de ces éléments de manière uniforme sur tous les navigateurs.
OriginalL'auteur bboysupaman
C'est ce que je fais. Au moins avec iOS8 il fonctionne très bien et se débarrasser de l'horrible dégradé, tout en permettant la liste déroulante de s'asseoir sur un non sur fond blanc.
J'ai simplement utilisé ont
background-color: white
, suivi de près par l'image.J'ai eu à ajouter une flèche personnalisé, mais je n'ai insérée dans mon css avec un base64 PNG
Qu'est-ce que
.uglyselect
vous pouvez demander? C'est mon Modernizr test pour iPadVous pouvez le renommer comme vous le veuillez ou le supprimer si vous n'êtes pas à l'aide de Modernizr. Je préfère me limiter à iOS de cette façon, donc je n'ai pas eu à le tester sur tous les navigateurs (et c'est ce que vous avez demandé de toute façon). La valeur par défaut de liste déroulante pour les navigateurs de bureau est acceptable pour mon dessin.
(Ces rembourrage paramètres ont été optimisés pour les valeurs numériques et peut-être besoin d'être modifié pour plus de valeurs de texte).
Vous pouvez faire votre propre icône et de trouver une image en base64 codeur pour créer les données de l'image
Je dois faire un thème qui fonctionne sur de nombreux sites différents, qui ont (peut-être) leur propre couleur d'arrière-plan. Donc, je suis à la recherche d'une solution sans génération d'image. Je vais essayer un Select2 solution à la place.
Pour mon cas, j'ai décidé que j'étais ok avec le dégradé. J'ai trouvé que la fixation d'une couleur d'arrière-plan sur la sélection ne permettent de montrer à travers légèrement, j'ai donc utilisé le modernizr test et tout simplement très gras versions de couleurs pour requis, sale, une erreur de validation que j'ai besoin, jusqu'à ce qu'ils ressemblaient à d'autres champs dans ces mêmes états. Pas ce que l'OP est à la recherche d', mais peut être acceptable pour certains.
OriginalL'auteur Simon_Weaver
Légèrement différentes, mais cela a toujours pour moi.
Aussi longtemps que vous êtes à l'aide de modernizr, l'utiliser dans vos scripts fichier:
Ensuite, vous ajoutez simplement le spécifique styles CSS comme indiqué dans d'autres posts.
Par exemple:
Espère que ça aide. Comme je l'ai dit, il y a peut être d'autres moyens, mais celui-ci a fonctionné pour moi.
OriginalL'auteur Jason Gittings