Wenden Sie den Webkit-Bildlaufleistenstil auf das angegebene Element an

Ich bin neu in Pseudoelementen, denen ein Doppelpunkt vorangestellt ist. Ich bin auf einen Blog-Artikel gestoßen, in dem es um das Styling von Bildlaufleisten mit nur einem Webkit-CSS ging. Kann das Pseudoelement-CSS auf einzelne Elemente angewendet werden?

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

In dieser Geige möchte ich die Bildlaufleiste des Div anpassen, aber die Bildlaufleiste des Hauptfensters bleibt auf der Standardeinstellung.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Ihre Idee war richtig. Die Notation div ::-webkit-scrollbarmit einem Leerzeichen danach divist jedoch dieselbe wie div *::-webkit-scrollbar; Dieser Selektor bedeutet "Bildlaufleiste eines beliebigen Elements im Inneren <div>". Verwenden Sie div::-webkit-scrollbar.

Siehe Demo unter http://jsfiddle.net/4xMUB/2/

Ich möchte eine Klassenauswahl für die Verwendung einer benutzerdefinierten Bildlaufleiste verwenden.

Irgendwie .foo::-webkitfunktioniert das nicht, aber ich habe herausgefunden, dass div.foo::-webkitdas funktioniert! Diese ## $$ * ## Pseudo-Dinge ....

Siehe http://jsfiddle.net/QcqBM/16/

Sie können diese Regeln auch anhand der ID des Elements anwenden. Angenommen, die Bildlaufleiste eines Div muss mit der ID "myDivId" gestaltet werden. Dann können Sie Folgendes tun. Auf diese Weise können Sie verschiedene Stile für Bildlaufleisten verschiedener Elemente verwenden.

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

http://jsfiddle.net/QcqBM/516/