CSS テキストボックスは読み取り専用

Web サイトのデザインでは、ユーザーが入力した情報を保存するためにテキスト ボックスをよく使用します。場合によっては、このテキスト ボックスは情報の表示のみに使用でき、変更できないことが望ましいと考えられます。このとき、CSSの読み取り専用プロパティを使用する必要があります。

HTML では、通常、input タグを使用してテキスト ボックスを作成します。このうち、type 属性は、テキスト ボックス、パスワード ボックス、電子メールなどの入力ボックスの種類を設定できます。テキスト ボックスを読み取り専用にするには、readonly プロパティを true に設定する必要があります。以下に例を示します。

a5904c8a6067aff3c8ea6f700cb30a7a

上記のコードでは、テキスト ボックスの値は " johndoe 」の場合、readonly 属性は true、つまり読み取り専用ステータスに設定されます。

次に、CSS を使用してテキスト ボックスを読み取り専用にする方法を見てみましょう。まず、HTML 内の input 要素を見つけて、属性セレクターを使用して読み取り専用のテキスト ボックスを選択する必要があります。属性セレクターは、属性値に基づいて要素を選択できます。構文は、attribute=value です。たとえば、読み取り専用のテキスト ボックスを選択するには、次のコードを使用できます。

input[readonly] {

background-color: #eee;

}

上記のコードは、すべてを選択します。読み取り専用のテキスト ボックス 属性の入力要素の背景色はグレーに設定されます。特定のタイプのテキスト ボックスのみを選択したい場合は、次のように記述できます:

inputtype="text" {

background-color: #eee;

}

これにより、すべてのタイプが選択されます属性「text」入力要素の readonly 属性を true に設定し、背景色をグレーに設定します。選択をさらに制限したい場合は、クラスまたは ID セレクターなどの他のセレクターを使用できます。

背景色の変更に加えて、他の CSS スタイルを使用して読み取り専用テキスト ボックスを表示することもできます。たとえば、テキスト ボックスの色、枠線、フォントなどを変更できます。一般的な読み取り専用テキスト ボックスのスタイルをいくつか示します。

/ テキスト ボックスを編集不可にする /
input[readonly] {

-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;

}

/ テキスト ボックスの境界線を削除します /
input[readonly] {

border: none;

}

/ 背景色とフォント色の変更テキスト ボックスとフォント サイズの /
input[readonly] {

background-color: #f0f0f0;
color: #333;
font-size: 14px;

}

つまり、CSS の読み取り専用プロパティを使用すると、テキスト ボックスは読み取り専用です。これにより、ユーザーが入力した情報は変更されなくなります。 CSS スタイルを調整することで、テキスト ボックスの表示効果を変更して、Web サイトのデザイン スタイルとの一貫性を高めることもできます。

以上がCSS テキストボックスは読み取り専用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。