HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定（設定されたオブジェクトにスクロールバーを表示するかどうかを設定します）
水平方向のコンテンツオーバーフローのoverflow-x設定
垂直コンテンツのオーバーフローの overflow-y 設定上記の 3 つのプロパティは、visible (デフォルト値)、scroll、hidden、auto に設定されています。
2. scrollbar-3d-light-color 3次元スクロールバーの明るい端の色（スクロールバーの色を設定します）
scrollbar-arrow-color上下ボタンの三角形の矢印の色
scrollbar-base-color スクロールバーの基本色
scrollbar-dark-shadow-color 3次元スクロールバーの濃い影の色
scrollbar-face-color 3次元スクロールバーの突出部分の色
scrollbar-highlight-color スクロールバーの空白部分の色
scrollbar-shadow-color 3 次元スクロールバーの影の色。上記のスタイル属性を説明するために、いくつかの例を使用します。
1. ブラウザウィンドウにスクロールバーがないことを確認する<br />水平スクロールバーがない

コードをコピー

コードは次のとおりです。

垂直スクロールバーなし

コードをコピー

コードは次のとおりです。

スクロールバーなし

コードをコピー

コードは次のとおりです。

2. 複数行テキストボックスのスクロールバーを設定する
水平スクロールバーなし

コードをコピー

コードは次のとおりです。

垂直スクロールバーなし

コードをコピー

コードは次のとおりです。

< テキストエリア style="overflow-y:hidden">< / テキストエリア >

スクロールバーなし

コードをコピー

コードは次のとおりです。

3. ウィンドウのスクロールバーの色を設定する<br />ウィンドウのスクロールバーの色を赤に設定する<body style="scrollbar-base-color:red">
scrollbar-base-color は基本色を設定します。通常、スクロールバーの色を変更するには、この 1 つのプロパティを設定するだけで済みます。
ちょっとした特殊効果を追加します:

コードをコピー

コードは次のとおりです。

4. スタイルシートファイルにクラスを定義し、スタイルシートを呼び出す

コードをコピー

コードは次のとおりです。

<スタイル>
.coolscrollbar{スクロールバーの矢印の色:黄色;スクロールバーのベース色:ライトサーモン;}
</スタイル>

次のように呼び出します:

コードをコピー

コードは次のとおりです。

テキストエリアの色と境界線の設定:

コードをコピー

コードは次のとおりです。