CSS Personnalisé menu Déroulant, Sélectionnez qui fonctionne sur tous les navigateurs IE7+ FF Webkit
Je voudrais faire un custom liste déroulante qui fonctionne sur tous les navigateurs. J'ai créé un ici, mais la flèche n'est pas cliquable. Si je l'ai mis comme fond pour la sélectionner, puis firefox va remplacer une flèche sur le dessus de cela. Quelqu'un peut-il me dire quelle est la meilleure technique pour obtenir une mesure à la recherche déroulante qui fonctionne sur tous les navigateurs et comment puis-je faire que la molette cliquable sans Javascript?
CSS:
CSS:
#menulist {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 32px;
border: 1px solid #000;
width: 260px;
text-indent: 8px;
}
.arrow {
cursor: pointer;
height: 32px;
width: 24px;
position: absolute;
right: 0px;
background-color: #c8c8c8;
background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}
HTML:
<span style="position:relative;">
<span class="arrow" ></span>
<select id="menulist">
<option value="one">One</option>
<option value="two">Two</option>
</select>
</span>
- Je ne voudrais pas vous inquiéter autant à propos de ie7 et serait plus inquiets, à propos de ie6.
Vous devez vous connecter pour publier un commentaire.
C'est très simple, vous avez juste besoin d'ajouter une image d'arrière-plan de l'élément select et dans la position où vous en avez besoin, mais n'oubliez pas d'ajouter:
Selon http://shouldiprefix.com/#appearance
Microsoft Edge et IE mobile en charge cette propriété avec l'-webkit - préfixe plutôt que d'-ms - pour des raisons d'interopérabilité.
Je viens de faire ce violon http://jsfiddle.net/drjorgepolanco/uxxvayqe/
-ms-appearance: none;
?Comme par Lien: http://bavotasan.com/2011/style-select-box-using-only-css/ il y a beaucoup de retouches, qui doit être fait(Mettre de div et de la position de l'image. Aussi la conception de casser l'option d'exploration sera mis alligned pour le sélectionner.
Ici est un moyen facile et simple qui vous permettra de mettre votre propre liste déroulante de l'image et de supprimer le navigateur par défaut de la liste déroulante.(Sans l'aide supplémentaire de la div). Sa croix navigateur ainsi.
HTML
CSS
Vous pouvez vérifier Select2 plugin:
http://ivaynberg.github.io/select2/
Select2 est un jQuery en fonction de remplacement pour sélectionner les cases. Il prend en charge la recherche, à distance des ensembles de données et l'infini défilement des résultats.
Il est très populaire et très facile à entretenir.
Elle devrait couvrir la plupart de vos besoins si ce n'est tous.
La
pointer-events
pourrait être utile pour ce problème que vous seriez en mesure de mettre un div sur le bouton de la flèche, mais encore être en mesure de cliquer sur le bouton de la flèche.La
pointer-events
css permet de cliquer sur un div.Cette approche ne fonctionnera pas pour les versions IE âgés de plus de IE11, cependant. Vous pourriez quelque chose de travail dans IE8 et IE9 si l'élément que vous mettez sur le dessus de la flèche est un
SVG
élément, mais il sera plus compliqué de style sur le bouton de la façon dont vous voulez procéder comme ceci.Ici un Js fiddle exemple: http://jsfiddle.net/e7qnqzx6/2/
J'ai également un problème similaire. Enfin trouvé une solution à https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers
Remarque:
1) Pour l'assistance de Firefox il y a CSS spéciale de manutention pour SÉLECTIONNER l'élément parent, veuillez jeter un oeil de plus près.
2) Télécharger le bas.png de Vers le bas.png
Code CSS
Code HTML
Ce qui fonctionne le mieux dans Firefox. Dommage que Chrome et Safari ne supporte pas cela plutôt facile CSS style.