Comment changer la couleur des barres de défilement

Je veux changer la couleur des barres de défilement sur mes pages dans Internet Explorer et Firefox.Comment changer la couleur des barres de défilement

Ce code crée des barres de défilement:

<div style="overflow: auto; width: 750px; height: 400px"> 
</div>

Pour changer leur couleur, j'ai essayé ce code:

<STYLE TYPE="text/css"> 

BODY 
{ 
scrollbar-base-color: orange; 
scrollbar-arrow-color: green; 
scrollbar-DarkShadow-Color: blue; 
} 
</STYLE>

Le code ci-dessus est dans mon en-tête, mais il n'a pas changé les barres de défilement Couleur.

Quelqu'un peut-il m'aider?

Source

2010-01-04 Gopal

S'il vous plaît ne pas changer la couleur de ma barre de défilement, il fait partie du chrome du navigateur, et est déjà écorché pour correspondre à mon système d'exploitation. – Karl

Comme d'autres l'ont dit, le CSS que vous avez posté ne fonctionnera pas sur les navigateurs modernes (IE8, Safari, Firefox, etc.). Puisque vous essayez de faire défiler un div, vous avez, cependant, l'option de faire une barre de défilement personnalisée en Javascript/DHTML. Une recherche rapide sur Google révèle que certains l'ont fait comme celui-ci: http://www.hesido.com/web.php?page=customscrollbar

Source

2010-01-04 06:08:43 Newtang

Ce code ne fonctionne que dans Internet Explorer. Testez-vous Firefox ou Safari par hasard?

Source

2010-01-04 05:29:02

En utilisant Firefox aussi. – Gopal

Il fonctionne seulement dans Internet Explorer 5+ et a apparemment été abandonné dans IE8. –

Essayez cette

*, html { 
scrollbar-face-color: #FF0000; 
scrollbar-shadow-color: #0000FF; 
scrollbar-highlight-color: #00FF00; 
scrollbar-3dlight-color: #FF00FF; 
scrollbar-darkshadow-color: #00FFFF; 
scrollbar-track-color: #FFFF00; 
scrollbar-arrow-color: #000000;}

Source

2010-01-04 05:29:57

Cela ne fonctionnera que sur IE6, et 7. Pas IE8, Firefox, Safari, etc – Newtang

Il travaille dans IE5 à 7. Il a été arrêté dans IE8. Safari a récemment apporté son soutien en utilisant différentes propriétés css je crois.

La modification de la couleur de la barre de défilement présente des problèmes d'utilisation.

Source

2010-01-04 05:30:16 alex

Créez une classe pour div, codez les couleurs de la barre de défilement dans cette classe, puis appliquez-la à la div. Vous ne modifiez pas les couleurs de la barre de défilement sur le navigateur, mais seulement la div que vous créez. Votre div serait <div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>

Dans votre classe, vous créeriez les couleurs de la barre de défilement en utilisant les noms de parties de la barre de défilement applicables, c'est-à-dire la barre de défilement et ainsi de suite. Pour savoir quel code s'applique à quelle zone du défilement cocher http://iebar.discoveryvip.com/, ou vous pouvez effectuer une recherche sur le Web, il existe un certain nombre d'endroits pour cela.

Source

2012-06-23 18:29:39 Ruth

pour Chrome et Safari, vous pouvez changer le style de la barre de défilement en utilisant ce code:

/* Chrome, Safari */ 
::-webkit-scrollbar { 
width: 15px; 
height: 15px; 
} 
::-webkit-scrollbar-track-piece { 
background-color: #C2D2E4; 
} 
::-webkit-scrollbar-thumb:vertical { 
height: 30px; 
background-color: #0A4C95; 
}

Source

2012-08-07 14:29:59 CoursesWeb

Ce code a été easyer coller juste après

< head>

<style type="text/css"> 
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; } 
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; } 
</style>

Source

2013-01-23 02:18:55 tiaratial

Il semble que l'OP était intéressé par une couleur de fond, pas d'image de fond. –

cela a fonctionné, capable de changer l'arrière-plan et la couleur de la barre de défilement avec le code. – JohnA10

Il suffit de copier et coller après la tête pour

coins 1.rounded style

<style type="text/css"> 
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; } 
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; } 
</style>

2.coins carrés avec un style de bordure

<style type="text/css"> 
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;} 
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;} 
</style>

vous pouvez changer la couleur pour le code click here ou here

Source

2013-01-23 02:52:13 tiaratial

enter code here 


html,body{ 
    scrollbar-face-color: #414340; 
      scrollbar-shadow-color: #cccccc; 
      scrollbar-highlight-color: #cccccc; 
      scrollbar-3dlight-color: #cccccc; 
      scrollbar-darkshadow-color: #cccccc; 
      scrollbar-track-color: #cccccc; 
      scrollbar-arrow-color: #000000; 
}

Source

2014-02-13 03:36:49 CodeOptimizer

Nous pouvons changer la couleur de la barre de défilement en utilisant javascript également. Il y a différents composants dans la barre de défilement comme la couleur de base, la couleur du visage, la couleur des flèches, etc. qui changent la couleur des différentes parties de la barre de défilement. Les lignes suivantes pourraient vous aider.

document.body.style.scrollbarBaseColor = "colorname"; 
document.body.style.scrollbarArrowColor = "colorname"; 
document.body.style.scrollbarTrackColor = "colorname";

Outre les styles ci-dessus, vous aurez scrollbarShadowColor, scrollbarHighlightColor, scrollbar3dlightColor, scrollbarDarkshadowColor etc. Alors, choisissez votre composant de la barre de défilement et changer la couleur de celui-ci.

Source

2015-02-04 12:35:58

Comment changer la couleur des barres de défilement

Répondre

Questions connexes