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 の基本演算子

推薦する

Ubuntu 14.04 で QT5 をインストール、設定、アンインストールするための詳細な手順

1. 以前 QT5.13 バージョンをダウンロードしましたが、インストール後、Qtcreator を...

MySQL 8.0 の新機能: ハッシュ結合

MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...

JavaScript の useRef と useState の紹介

目次1. useStateフック2. useRefフック3. useRef と useState 4...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

JavaScript でプライベート メンバーを作成する

目次1. クロージャを使用する2. ES6クラスを使用する3. ES2020提案を使用する4. We...

Linux で nginx を起動および再起動する方法

Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...

Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする

方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...

ES6実装クラスのプライベート変数の書き方をいくつか詳しく説明します

プライベート変数のクロージャ実装プライベート変数は共有されないnew キーワードにより、 perso...

CSS transform-originプロパティを理解する

序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

公式 MySQL Web サイトから Ubuntu Linux 用の最新バージョンの MySQL を...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...

テキストエリアタグはサイズ変更できず、マウスでドラッグすることもできません

テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...

HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル (Win7 の場合)

Windows 7 で MySQL 5.7.17 をインストールする方法についてのグラフィック チ...