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

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 />水平スクロールバーがない

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

<body style="overflow-x:hidden">

垂直スクロールバーなし

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

<body style="overflow-y:hidden">

スクロールバーなし

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

<body style="overflow-x:hidden;overflow-y:hidden"> または <body style="overflow:hidden">

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

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

<textarea style="overflow-x:hidden">< /textarea>

垂直スクロールバーなし

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

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

スクロールバーなし

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

<textarea style="overflow-x:hidden;overflow-y:hidden">< /textarea>
または <textarea style="overflow:hidden"></textarea>

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

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

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

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

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

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

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

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

<textarea class="coolscrollbar">< /textarea>

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

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

<textarea style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea>

<<:  CSSのborder-radiusプロパティを使用して円弧を設定します

>>:  JavaScript の基本演算子

推薦する

MySQL マスタースレーブレプリケーションの原理と注意点

前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...

テーブル関連の配置とJavascript操作テーブル、tr、td

適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

HTML ページの部分更新の実装コード

イベント応答の更新: 要求されたときのみ更新1. JS HTML DOM または jQuery を介...

Docker nginxのインストールと設定方法

DockerでNginxイメージをダウンロードする docker プル nginx Docker イ...

MySQLが基礎データ構造としてB+ツリーを使用する理由

MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...

HTML テーブルタグチュートリアル (12): 境界線スタイル属性 FRAME

FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...

MySQL における楽観的ロックと悲観的ロックの例

データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...

div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...

jsでユーザー登録機能を実装する

この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

CSS3 でテキストの点滅効果を実現する 3 つの方法 サンプルコード

1. 透明度を変更してテキストを徐々に点滅させると、次のような効果が得られます。 <!DOCT...

uniapp エントリーレベル nvue クライミングピット記録の分析

目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...