dropdown en javascript et css

Souvent on me pose la question sur comment styliser un select d'un formulaire. Il est possible de modifier la taille, la hauteur, le padding, etc. Mais il est impossible de changer l'aspect de la fleche de dropdown.

Dans cet article, je vais vous montrer comment remplacer vos select "classiques" par un equivalent en HTML stylisé en CSS et géré en javascript et qui est utilisable dans un <form> très facilement. De plus il est compatible tous navigateurs et tous devices (mobile, tablette et desktop)

La structure HTML

<div class="selectBox">
        <input type="hidden" name="univers" value="voiture"/>
        <div class="selected">Automobile</div>
        <div class="selectArrow">&nbsp;</div>
        <div class="selectOptions" >
                <div class="selectOption" value="voiture">Automobile</div>
                <div class="selectOption" value="utilitaire">Utilitaire</div>
                <div class="selectOption" value="moto">Moto</div>
                <div class="selectOption" value="camping-car">Camping Car</div>
        </div>
</div>

Le CSS

div.selectBox {
   position: relative;
   cursor: default;
   font-weight: 400;
   margin: 10px 0 0px;
   width: 80%;
   z-index: 1;
}
div.selectBox.select-click,div.selectBox.selected {
   z-index: 10;
}
div.selectBox.select-click .selected,div.selectBox.selected .selected {
   border: 3px solid #20a5e2;
}
   div.selectBox.select-click .selectArrow,div.selectBox.selected .selectArrow
{
top: 3px;
   background-position: -115px -177px;
}
div.selectBox div.selected {
   position: relative;
   text-indent: 20px;
   border: 1px solid #d7d7d7;
   border-right: none;
   background: #e9e9e9;
   overflow: hidden;
   line-height: 38px;
}
div.selectBox div.selected,div.selectBox div.selectArrow {
   z-index: 1;
}
div.selectBox div.selectArrow {
   width: 38px;
   height: 40px;
   position: absolute;
   top: 0;
   right: 0;
   text-align: center;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
   background: url("../images/selectbox.png") -115px
      -231px no-repeat;
}
div.selectBox div.selectOption {
   display: block;
   line-height: 20px;
   padding: 10px 15px;
   border-top: 1px solid #d7d7d7;
}
div.selectBox div.selectOption:hover {
   color: #f6f6f6;
   background: #20a5e2;
}
div.selectBox div.selectOptions {
   position: absolute;
   top: 44px;
   left: 0;
   width: 100%;
   border: 1px solid #d7d7d7;
   border-top: none;
   overflow: hidden;
   background: #fff;
   display: none;
}

Le javascript

(function($){
   var selectbox = {
      init : function(){
         /*on replie les select box quand on clique en dehors de leur zone*/
         $(document).on('mouseup', function(event) {
            var target = event.target;
            if (target.parentNode.className !== 'selectBox' && target.parentNode.className !== 'selectBox select-click' 
&& target.parentNode.className !== 'selectBox selected' && target.parentNode.className !== 'selectBox selected select-click') {
               var selectBox = $('.selectBox');
               selectBox.removeClass('select-click');
               selectBox.find('.selectOptions').css({'display' : 'none'});
            }
         });
         return this;
      },
      create : function(jQuerySelecteur){
         var $this = jQuerySelecteur;
         var selectOptions = $($this.find('.selectOptions').get(0));
         var heightSelect = selectOptions.height();
         if (heightSelect > 200) {
            selectOptions.css({maxHeight : 200, 'overflow-y' : 'scroll'});
         }

         jQuerySelecteur.children('div.selected').html($this.children('div.selectOptions').children('div.selectOption:first').html());
         jQuerySelecteur.attr('value',jQuerySelecteur.children('div.selectOptions').children('div.selectOption:first').attr('value'));

         jQuerySelecteur.children('div.selected,div.selectArrow').on('click', function() {
            $this.toggleClass('select-click');
            if(jQuerySelecteur.children('div.selectOptions').css('display') == 'none') {
               jQuerySelecteur.children('div.selectOptions').css('display','block');
            } else {
               jQuerySelecteur.children('div.selectOptions').css('display','none');
            }
         });

         jQuerySelecteur.find('div.selectOption').on('click', function() {
            $this.removeClass('select-click');
            $(this).parent().css('display','none');
            var value = $(this).attr('value');
            $this.attr('value', value);
            var inputHidden = $this.find('input').get(0);
            inputHidden.value= value;
            $(this).parent().siblings('div.selected').html($(this).html());
            $this.trigger('changeValue');
         });
         return this;
      },
      reload : function(jQuerySelecteur) {
         this.remove(jQuerySelecteur).create(jQuerySelecteur);
      },
      remove : function(jQuerySelecteur){
         jQuerySelecteur.children('div.selected,div.selectArrow').off('click');
         jQuerySelecteur.find('div.selectOption').off('click');
         return this;
      }
   };
   if (typeof window.selectbox == "undefined") {
      window.selectbox = selectbox;
    }
})(jQuery);

Utilisation

<head>
    <link rel="stylesheet" href="eas.selectbox.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="eas.selectbox.js"></script>
    <script type="text/javascript">
        $(function(){
            selectbox.init().create($('.selectBox'));
        });
    </script>
</head>
<body>
<div class="selectBox">
        <input type="hidden" name="univers" value="voiture"/>
        <div class="selected">Automobile</div>
        <div class="selectArrow">&nbsp;</div>
        <div class="selectOptions" >
                <div class="selectOption" value="voiture">Automobile</div>
                <div class="selectOption" value="utilitaire">Utilitaire</div>
                <div class="selectOption" value="moto">Moto</div>
                <div class="selectOption" value="camping-car">Camping Car</div>
        </div>
</div>
</body>
    

Exemple

Automobile
 
Automobile
Utilitaire
Moto
Camping Car
image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page