CSSセットテキストボックス

Web 開発では、テキスト ボックスは一般的なユーザー入力コントロールです。 CSS スタイルを使用すると、色、サイズ、フォント、枠線などを含めてテキスト ボックスを多様化できます。この記事では、より美しく実用的なWebページを構築するためにCSSを使用してテキストボックスを設定する方法を詳しく紹介します。

1. テキスト ボックス サイズの設定

テキスト ボックスのサイズを設定するには、CSS の幅と高さのプロパティを使用できます。たとえば、次のコードはテキスト ボックスの幅を 200 ピクセルに、高さを 30 ピクセルに設定します。

input[type="text"] {
    width: 200px;
    height: 30px;
}

さらに、max-width と max-width を使用してテキスト ボックスの最大サイズを設定することもできます。 CSS の max-height プロパティを使用して、テキスト ボックスがさまざまな画面サイズに適応するようにします。

input[type="text"] {
    max-width: 100%;
    height:30px;
}

2. テキスト ボックスの色を設定します。

テキスト ボックスの色は 1 つです。私たちの美しさにおける重要な要素。 CSS のbackground-color プロパティを使用してテキスト ボックスの背景色を設定し、color プロパティを使用してテキスト ボックス内のテキストの色を設定できます。たとえば、次のコードはテキスト ボックスの背景色をグレーに設定し、テキストの色を黒に設定します。

input[type="text"] {
    background-color: #ccc;
    color: #000;
}

3. テキスト ボックスのフォントを設定します

同じテキストボックスの色、フォントと同様に、テキストボックスを美しくするための重要な要素の1つです。 CSS の font-family プロパティを使用してテキスト ボックス内のテキストのフォントを設定し、font-size プロパティを使用してフォント サイズを設定できます。たとえば、次のコードは、テキスト ボックスのフォントを Microsoft Yahei に設定し、フォント サイズを 14pt に設定します。

input[type="text"] {
    font-family: "Microsoft YaHei",Arial,sans-serif;
    font-size: 14pt;
}

4. テキスト ボックスの境界線の設定

設定テキストボックスの枠線もテキストです。 フレームの美化における重要な要素の 1 つです。 CSS の border プロパティを使用して、テキスト ボックスの境界線のスタイル、幅、色を設定できます。たとえば、次のコードはテキスト ボックスの境界線を実線、幅 1 ピクセル、色をグレーに設定します。

input[type="text"] {
    border: 1px solid #ccc;
}

さらに、CSS の border-radius を使用することもできます。プロパティを使用してテキスト ボックスの丸い境界線を設定し、テキスト ボックスの美しさを高めます。

input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 5px;
}

5. テキスト ボックスのフォーカス スタイルを設定する

テキスト ボックスにフォーカスが当たったら、他のテキスト ボックスと区別するためにさまざまなスタイルを設定できます。 CSS の :focus 疑似クラスを使用して、フォーカスを取得したときにテキスト ボックスのスタイルを設定できます。たとえば、次のコードは、テキスト ボックスがフォーカスを受け取ったときに背景色を黄色に設定します。

input[type="text"]:focus {
    background-color: yellow;
}

6. テキスト ボックスを無効な状態に設定します

場合によっては、ユーザーが入力できないようにするには、テキスト ボックスを無効な状態に設定する必要があります。 CSS :disabled 擬似クラスを使用して、テキスト ボックスの無効なスタイルを設定できます。たとえば、次のコードは、無効になっているテキスト ボックスの背景色をグレーに設定し、テキストの色をライトグレーに設定します。

input[type="text"]:disabled {
    background-color: #eee;
    color: #ccc;
}

7. 包括的なスタイル設定

最後に、上記のスタイルを変更して、テキスト ボックスの完全なスタイルを設定します。たとえば、次のコードはテキスト ボックスを完全に設定します:

input[type="text"] {
    width: 200px;
    height: 30px;
    padding: 5px 10px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14pt;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="text"]:focus {
    background-color: #fff;
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.6);
}

input[type="text"]:disabled {
    background-color: #eee;
    color: #ccc;
}

この記事では、CSS スタイルを使用してテキスト ボックスを設定する方法を詳しく説明します。これらのスタイル設定を通じて、テキスト ボックスをより美しく実用的なものにし、ユーザー エクスペリエンスを向上させることができます。この記事があなたの Web 開発の仕事に役立つことを願っています。

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