Articles HTML5

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)

<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>

zoomcar - le nouveau site d'annonce de vehicules d'occasion

Aujourd'hui avec mes collègues, nous avons livré un nouveau site d'annonce de véhicules d'occasion zoomcar.fr.

Ce site a été un véritable défi technique à mettre en place. Plusieurs techno ont été utilisées :

Le Varnish permet de détecter le type de device utilisé et de mettre en cache des pages spécifiques mobiles ou desktop et d'informer le backend PHP sur le mode RESS à utiliser.

Zoomcar fete ses 2 ans

Zoomcar.fr vous donne accès à plus de 155 000 annonces de voitures, camping-cars, utilitaires et motos d'occasion, mis en vente partout en France par des professionnels et des particuliers.

Pas besoin d’Adblock sur zoomcar.fr ! Aucune publicité ne viendra perturber votre navigation.

Pour trouver votre véhicule, accédez à un moteur de recherche intuitif et mettez en favoris vos coups de cœur. Pour gagner du temps, recevez chaque jour les nouvelles annonces souhaitées. Pour être certain de payer le bon prix, un service gratuit de calcul de cote en ligne vous permet de suivre l'évolution des prix d'une voiture sur le marché de l'occasion.

retourner en haut de la page