Giv dine scroll bars nye farver med CSS
af Jonas Astrup, HTML.dk
Sidst opdateret 1. december 2000
En standard scroll bar er grå - og lidt kedelig, men sådan behøver det ikke at være mere. Nu kan du nemlig give hver enkelt bestandel af en scroll bar forskellige farver med Cascading Style Sheets (CSS).
Du kan ændre farverne på alle elementer, som indeholder en scroll bar - f.eks. selve browservinduet eller et textarea (se eksemplet til højre)
Denne artikel kigger nærmere på hvordan man gør. Vær dog opmærksom på at egenskaberne ikke er en del af den officielle W3C-standard, og kun understøttes af Internet Explorer 5.5
Artiklen forudsætter at man har et basalt kendskab til HTML og CSS. Hvis du mangler dette kendskab anbefales det at du først læser vores HTML tutorial og CSS tutorial.
Følgende CSS-egenskaber vil blive gennemgået:
- scrollbar-base-color
- scrollbar-face-color
- scrollbar-shadow-color
- scrollbar-darkshadow-color
- scrollbar-highlight-color
- scrollbar-arrow-color
- scrollbar-3dlight-color
scrollbar-base-color
Egenskaben scrollbar-base-color definerer farverne på hoved-elementerne på en scroll bar, hvilket inkluderer scroll boksen, sporet, og scroll pilene. I nedenstående eksempel bliver scrollbar-base-color sat på et <textarea>.
<html>
<head>
<style>
textarea {
scrollbar-base-color:blue;
}
</style type="text/css">
</head>
<body>
<textarea>Dette textarea
har en blå scrollbar.</textarea>
</body>
</html>
scrollbar-face-color
Egenskaben scrollbar-face-color definerer farverne på scroll boksen og scroll pilene på en scroll bar. I nedenstående eksempel bliver scrollbar-face-color sat på selve browservinduet - d.v.s. på <body>.
<html>
<head>
<style type="text/css">
body {
scrollbar-face-color:red;
}
</style>
</head>
<body>
</body>
</html>
scrollbar-shadow-color
Egenskaben scrollbar-shadow-color definerer farverne på bund- og højrekanten af scroll boksen og scroll pilen på en scroll bar. I nedenstående eksempel bliver scrollbar-shadow-color sat på et <textarea>.
<html>
<head>
<style type="text/css">
textarea {
scrollbar-shadow-color:yellow;
}
</style>
</head>
<body>
<textarea>Dette textarea
har en grøn scroll bar skygge.</textarea>
</body>
</html>
scrollbar-darkshadow-color
Egenskaben scrollbar-darkshadow-color definerer farverne på renden i scroll boksen. I nedenstående eksempel bliver scrollbar-darkshadow-color sat på et <body>.
<html>
<head>
<style type="text/css">
body {
scrollbar-darkshadow-color:aqua;
}
</style>
</head>
<body>
</body>
</html>
scrollbar-highlight-color
Egenskaben scrollbar-highlight-color definerer farverne på top- og venstrekanten af scroll boksen og scroll pilen på en scroll bar. I nedenstående eksempel bliver scrollbar-highlight-color sat på et <textarea>.
<html>
<head>
<style type="text/css">
textarea {
scrollbar-highlight-color:magenta;
}
</style>
</head>
<body>
<textarea>Dette textarea
har en lilla highlight.</textarea>
</body>
</html>
scrollbar-arrow-color
Egenskaben scrollbar-arrow-color definerer farven på pilen på en scroll bar. I nedenstående eksempel bliver scrollbar-arrow-color sat på et <textarea>.
<html>
<head>
<style type="text/css">
textarea {
scrollbar-arrow-color:yellow;
}
</style>
</head>
<body>
<textarea>Dette textarea
har en gul pil.</textarea>
</body>
</html>
scrollbar-3dlight-color
Egenskaben scrollbar-3dlight-color definerer farven på top- og venstrekanten, samt pilen på en scroll bar. I nedenstående eksempel bliver scrollbar-3dlight-color sat på et <textarea>.
<html>
<head>
<style type="text/css">
textarea {
scrollbar-3dlight-color:aqua;
}
</style>
</head>
<body>
<textarea>Dette textarea
har en gul pil.</textarea>
</body>
</html>
