Barre de navigation personnalisable pour une fenetre modale

Bonjour à tous, je suis nouveaux sur Alsacréation et dans mes recherches sur Google je tombais sur ses tutos intéressants et j'ai donc décidé de m'inscrire pour des échanges de connaissances avec vous.

En effet j'ai pu créer (pour mon site) une fenêtre modale qui fonctionne à merveille mais je voudrais avoir une barre de défilement "personnalisée" un peu comme pour Yahoo ou Gmail lors de l'envoi d'un mail.

Je vous donne mon code, css d'abord et HTML ensuite.

/**********CSS***********************/

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0px;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}


.close:hover {
background: #00d9ff;
}


/******************************HTML*****************************/


<a href="#openModal">Ma Modal</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Tous sur le html</h2>
<p>Le langage html a été mis au point vers les années 1990 par Tim Berners-lee (alors chercheur au CERN) dans le but d’échanger des informations entre plusieurs personnes à travers un protocole....... </p>
<p>Cliquez sur la croix pour fermer cette fenêtre.</p>
</div>
</div>


Merci d'avance pour vos réponses et bonne soirée à tous.
Cordialement Dimtrovich.

Bonjour et bienvenue sur le forum, Dimtrovitch

Il n'y a aujourd'hui pas de moyen de faire ça de façon intéropérable en CSS. Tu as des propriétés CSS qui fonctionnent bien pour webkit, mais qui aujourd'hui ne souhaite que supporter que Chrome ?

En attendant que ces propriétés soient standardisées (ça devrait prendre du temps, et de toute façon c'est pas franchement une priorité ^^), tu devrais plutôt passer par JS ce qui va te permettre de pouvoir appliquer des styles CSS à de faux éléments de scroll recréés en HTML. Par exemple, en trois secondes je t'ai trouvé ce repo d'un plugin pour jQuery mais tu peux en trouver des centaines sur Google.