HOME >> スタイルシート > スクロールバーの色を指定する

point スクロールバーの色を指定する

scrollbar-base-color
scrollbar-face-color
scrollbar-arrow-color
scrollbar-3dlight-color
scrollbar-shadow-color
scrollbar-track-color
scrollbar-highlight-color
scrollbar-darkshadow-color
指定できる値
RGB値で指定
#RRGGBBやRGB(n%、n%,n%)など
カラー名
redやblueなど
システムカラーで指定

スクロールバーの色はIEでは灰色ですが、scrollbar-base-colorプロパティなどを使えばスクロールバーの色を変えることが出来ます。このプロパティをBODYに指定した場合、ページ全体のスクロールバーの色が指定された色になります。 フォームのテキストエリアがある場合は、このスクロールバーも一緒に指定された色になります。もし、テキストエリアのスクロールバーはBODYの指定とは違うものにしたい場合、テキストエリアにscrollbar-base-colorプロパティなどで指定すれば、そのテキストエリアのみスクロールバーの色を変えることが出来ます。

スクロールバーの色を指定するプロパティはscrollbar-base-colorプロパティの他に7つあります。大まかに色を変えるにはscrollbar-base-colorプロパティだけでいいですが、矢印や影の色も指定したいですよね。この下にその他のプロパティと、赤色を指定した場合の表示例がありますので、これを見て参考にして下さいね。

このプロパティはNetscapeには対応していないので、Netscapeで見た場合はスクロールバーの色は元のままです。

サンプル
プロパティ前後のscrollbarとcolorは省略して記入しています。 faceの場合は、scrollbar-face-colorです。
base face arrow track 3dlight highlight shadow darkshadow
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE>
<!--
BODY  {
  scrollbar-face-color:       #ffc97c; 
  scrollbar-highlight-color:  #ff963c;
  scrollbar-shadow-color:     #ff963c;
  scrollbar-darkshadow-color: #ffc97c;
  scrollbar-arrow-color:      #ff963c;
  scrollbar-base-color:       #fea970;
  scrollbar-3dlight-color:    #ffc97c;
  scrollbar-track-color:      #ffddaa;}
-->
</STYLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA rows="10" cols="20">
ページとテキストエリアのスクロールバーに
色がつきました
(これ以降の文字は省略)
<TEXTAREA>
</FORM>
</BODY>
</HTML> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved