Personnalisation barre de défilement dans une liste déroulante

Certains clients exigent de personnaliser non seulement l'affichage graphique de la liste déroulante (selectbox) mais aussi celle de la barre de défilement (scrollbar). Plusieurs méthodes sont possibles pour réaliser cette personnalisation, mais  je vais vous montrer seulement l'une de ces méthodes, à l’aide d’un plugin jquery .

1 - Après avoir téléchargé jquery.custom-select.js, il faut inclure la librairie dans la balise ‘head’ de votre page.

<!DOCTYPE html>
<html>
	<head>
		<title>CustomSelect plugin</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.custom-select.js"></script>
	</head>

2 - Ajoutez les styles suivants dans le fichier css. Ce sont des styles par défaut du plugin mais vous pouvez les modifier selon le besoin.

.b-custom-select {
    position:relative;
    display: inline-block;
    height: 23px;
    background: #fff;
    border-width: 1px;
    border-style: solid;
    border-top-color: #c3c3c3;
    border-bottom-color: #838383;
    border-left-color: #a2a2a2;
    border-right-color: #a2a2a2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	-moz-box-shadow: inset 0 1px 3px 1px #f2f2f4;
	-webkit-box-shadow: inset 0 1px 3px 1px #f2f2f4;
    box-shadow: inset 0 1px 3px 1px #f2f2f4;
    font-size: 13px;
    vertical-align: middle;
    text-align: left;
}
.b-custom-select_disabled {color: #bcbcbc; background: #f9f9f9;}
.b-custom-select_focus {}
.b-custom-select_expanded {z-index: 199; height: 24px; border-bottom: none; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;}

.lte7 .b-custom-select {display: inline; zoom:1;}

.b-custom-select__title {cursor: pointer; overflow: hidden;}
	.b-custom-select__title__text {margin: 5px 30px 3px 10px; font-size: 12px; white-space: nowrap; overflow: hidden;}
	.b-custom-select__title__icon {position: absolute; top:0px; right: 0px; display: block; width: 22px; height: 23px; border-left: 1px solid #d8d8d8; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; background: #fff;}
	.b-custom-select__title__icon:after {content: ""; position:absolute; top:10px;right:7px;border-top: 5px solid #3BA1C1;border-left:5px solid transparent;border-right:5px solid transparent;}
	.b-custom-select_expanded .b-custom-select__title__icon {}
	.b-custom-select_disabled .b-custom-select__title__icon {background: #f9f9f9;}
	.b-custom-select__title__input {height: 20px; padding: 2px 9px; border: none; background: none; outline: 0; font-family: arial; font-size: 12px;}

.b-custom-select__dropdown {
	background: #fff;
	border: 1px solid #cccccc;
	border-width: 1px;
	border-style: solid;
	border-top-color: #c3c3c3;
	border-bottom-color: #838383;
	border-left-color: #a2a2a2;
	border-right-color: #a2a2a2;
	-moz-border-radius: 0 0 3px 3px;
	-webkit--moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
}
    .b-custom-select__list {padding: 5px 5px;}
	.b-custom-select__group {padding: 4px; white-space: nowrap;font-family: arial; font-size: 12px; font-weight: bold;}
	.b-custom-select__item {position: relative; display: block; height: 15px; padding: 4px 5px; overflow: hidden; cursor: pointer; white-space: nowrap; border-bottom: 1px dotted #cecece; font-family: arial; font-size: 12px;}
	.b-custom-select_multiple .b-custom-select__item {}

    .b-custom-select__item:hover, .b-custom-select__item.selected {background: #f9f9f9;}
	.b-custom-select__item.disabled {color: #bcbcbc;}
	.b-custom-select_multiple .b-custom-select__item:hover, .b-custom-select_multiple .b-custom-select__item.selected {background: none;}
	.b-custom-select_multiple .b-custom-select__item.selected:before {background-position: -46px 0;}
	
	.b-custom-select__wrap-scrollbar {
		position: absolute;
		top:0;
		bottom:0;
		right:0;
		width:22px;
		border-left: 1px solid #ececec;
	}
	.b-custom-select__dropdown__inner::-webkit-scrollbar{width: 0;}
		.b-custom-select__wrap-scrollbar:after {
			content: "";
			position: absolute;
			top: 3px;
			bottom: 3px;
			left: 9px;
			width: 3px;
			border-left: 1px solid #bcbcbc;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
			background: #A4D7E0;
		}
	.b-custom-select__scrollbar {
		position: absolute;    
		z-index: 1;
		left:0;
		right:0;
		margin-left: auto;
		margin-right: auto;
		width: 15px;
		height: 15px !important;
		background: #3BA1C1;
		border-radius: 20px;
		cursor:pointer;
	}

3- Créez la liste de sélection de base dans le fichier html.

<body>
		<form action="">
			<div class="example_1">
				<label for="demo-select_1">Custom select : </label>
				<select name="" id="demo-select_1">
					<optgroup label="label 1">
						<option value="1" data-modifier="mod">Item 1</option>
						<option value="2">Item 2</option>
						<option value="3" disabled>Item 3</option>
						<option value="4">Item 4</option>
						<option value="5">Item 5</option>
						<option value="6" disabled>Item 6</option>
					</optgroup>
					<optgroup label="label 2">
						<option value="19">Item</option>
						<option value="20">Item</option>
						<option value="21">Item</option>
						<option value="22">Item</option>
						<option value="23" disabled>Item</option>
						<option value="24">Item</option>
						<option value="25">Item</option>
					</optgroup>
				</select>
			</div>
		</form>
	</body>

4 - Initialisez le plugin sur la liste de sélection.

<script type="text/javascript">
	$(function(){
		$('select').CustomSelect();
       )}
</script>

5 - Vous pourriez aussi changer quelques options en configurant le plugin,  comme le nombre de ligne, l'animation etc...

<script type="text/javascript">
			$(function(){
				$('select').CustomSelect({
					modifier: '',
					visRows: 20, 
					search: false, 
					speed: 200, 
					internalMode: false
				});
			});
		</script>

6- Et vous auriez comme résultat :

selectNocustom

Vous pouvez changer  la couleur, la forme selon vos besoins en modifiant quelques lignes dans le fichier css, et on aura le résultat suivant :

Capture

C’est une méthode très simple et facile à mettre en oeuvre,  je vous laisse refaire et bien suivre les différentes étapes du tutoriel.

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.