web-dev-qa-db-fra.com

Menu déroulant personnalisé CSS qui fonctionne sur tous les navigateurs IE7 + FF Webkit

J'aimerais créer un menu déroulant personnalisé qui fonctionne sur tous les navigateurs. J'en ai créé un ici mais la flèche n'est pas cliquable. Si je le définit comme arrière-plan pour la sélection, alors Firefox remplacera une flèche dessus. Quelqu'un peut-il me dire quelle est la meilleure technique pour obtenir un menu déroulant d'aspect personnalisé qui fonctionne sur tous les navigateurs et comment puis-je rendre ce bouton cliquable sans Javascript?

http://jsfiddle.net/DJDf8/1/

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;
}
<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>
csscss3cross-browser
38
Faz Ya

C’est très simple, il vous suffit d’ajouter une image d’arrière-plan à l’élément de sélection et de le positionner où vous le souhaitez, sans oublier d’ajouter:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Selon http://shouldiprefix.com/#appearance

Microsoft Edge et IE mobile supportent cette propriété avec le préfixe -webkit- plutôt que -ms- pour des raisons d'interopérabilité.

Je viens de faire ce violon http://jsfiddle.net/drjorgepolanco/uxxvayqe/

22
drjorgepolanco

Selon le lien: http://bavotasan.com/2011/style-select-box-using-only-css/ il y a beaucoup de retouches à faire (mettre des div et position supplémentaires) De plus, la conception sera brisée car l’option d’exploration sera mal attribuée à la sélection.

Voici un moyen simple et facile qui vous permettra de créer votre propre image de liste déroulante et de supprimer la liste déroulante par défaut du navigateur (sans utiliser de div supplémentaire). Son navigateur croisé aussi bien.

HTML

<select class="dropdown" name="drop-down">
  <option value="select-option">Please select...</option>
  <option value="Local-Community-Enquiry">Option 1</option>
  <option value="Bag-Packing-in-Store">Option 2</option>
</select>

CSS

select.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  padding: 9px;
  font-family: tescoregular;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
  background-size: 11px 7px;
}
9
Mainak Bhattacharjee

Vous pouvez vérifier le plugin Select2 :

http://ivaynberg.github.io/select2/

Select2 est un remplacement basé sur jQuery pour les boîtes de sélection. Il prend en charge la recherche, les ensembles de données distants et le défilement infini des résultats.

C'est assez populaire et très maintenable. Cela devrait couvrir la plupart de vos besoins, sinon tous.

8
lokers

Le pointer-events pourrait être utile pour résoudre ce problème, car vous pourriez placer une div sur le bouton fléché, tout en pouvant cliquer sur le bouton fléché.

Le pointer-events css permet de cliquer sur un div.

Cependant, cette approche ne fonctionnera pas pour les versions IE antérieures à IE11. Vous pouvez utiliser quelque chose dans IE8 et IE9 si l’élément que vous placez au-dessus du bouton fléché est un SVG élément, mais il sera plus compliqué de styler le bouton comme vous le souhaitez.

Voici un exemple de violon Js: http://jsfiddle.net/e7qnqzx6/2/

2
sboisse

J'avais aussi 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 -les-navigateurs

Remarque:

1) Pour la prise en charge de Firefox, il existe une gestion CSS spéciale pour le parent de l'élément SELECT, veuillez regarder de plus près.

2) Téléchargez le fichier down.png de Down.png

code CSS 

        /* For Firefox browser we need to style for SELECT element parent. */

        @-moz-document url-prefix() {

            /* Please note this is the parent of "SELECT" element */

            .select-example {   
                background: url('https://techmeals.com/external/images/down.png');
                background-color: #FFFFFF;
                border: 1px solid #9e9e9e;
                background-size: auto 6px;
                background-repeat: no-repeat;
                background-position: 96% 13px;
            }
        }

        /* IE specific styles */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
        {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        /* IE specific styles */
        @supports (-ms-accelerator:true) {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        select.my-select-box  {
            outline: none;
            background: #fff;
            -moz-appearance: window;
            -webkit-appearance: none;
            border-radius: 0px;
            text-overflow: "";
            background-image: url('https://techmeals.com/external/images/down.png');
            background-size: auto 6px;
            background-repeat: no-repeat;
            background-position: 96% 13px;
            cursor: pointer;
            height: 30px;
            width: 100%;
            border: 1px solid #9e9e9e;
            padding: 0 15px 0 5px;
            padding-right: 15px\9;      /* This will be apllied only to IE 7, IE 8 and IE 9 as */
            *padding-right: 15px;        /* This will be apllied only to IE 7 and below. */
            _padding-right: 15px;       /* This will be apllied only to IE 6 and below. */
        }

code HTML 

    <div class="select-example">
        <select class="my-select-box">
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
            <option value="4">Fourth Option</option>
        </select>
    </div>
1
HumbleGeek