HTMLスクロールバーのテキストエリア属性設定_HTML/Xhtml_Webページ制作-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLスクロールバーのテキストエリア属性設定_HTML/Xhtml_Webページ制作

May 16, 2016 pm 04:40 PM

スクロール・バー

1． Overflow コンテンツがオーバーフローした場合の設定（設定したオブジェクトにスクロールバーを表示するかどうかの設定）
overflow-x 横方向のコンテンツがオーバーフローした場合の設定
overflow-y 縦方向のコンテンツがオーバーフローした場合の設定
の値上記の 3 つの属性に設定されるのは、visible (デフォルト値)、scroll、hidden、および auto です。
2．スクロールバー-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. ブラウザウィンドウにスクロールバーを表示しないようにします
水平スクロールバーを表示しません

コードをコピーします

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

<body style="overflow-x:hidden"> 🎜>
垂直スクロールバーなし

コードをコピーコードは次のとおりです:

スクロールバーなし

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

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

コードをコピーしますコードは次のとおりです:

垂直スクロールバーなし

コードをコピーします

コードは次のとおりです < textarea style="overflow-y:hidden">

スクロールバーなし

コードをコピーします

コードは次のとおりです: <textarea style="overflow-x:hidden;overflow- y: hidden">< /textarea>

または< textarea style="overflow:hidden">< /textarea>

3. ウィンドウのスクロールバーを設定しますColor

ウィンドウのスクロールバーの色を赤に設定します<body style="scrollbar-base-color:red">
scrollbar-base-color のみが基本色を設定します。スクロールバーの色を変更するには、このプロパティを設定します。 少し特殊効果を追加します:

コードをコピーします

コードは次のとおりです: <body style="scrollbar-arrow-color: yellow;scrollbar-base-color:lightsalmon">

4. スタイルシートファイルでクラスを定義します。スタイルシート

コードをコピー

コードは次のとおりです: <style>

.coolscrollbar{scrollbar-arrow-color: yellow;scrollbar-base-color:lightsalmon;}

</style>

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

コードをコピーします

コードは次のとおりです: <textarea class="coolscrollbar ">< /textarea>

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

コードをコピー

コードは次のとおりです。 <textarea style="border:red Solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea>