CSSセットテキストボックス-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-21 09:12:36

オリジナル

1686 人が閲覧しました

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

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

テキストボックスのサイズを設定するには、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;
}

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

包括的なスタイル設定

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

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 サイトの他の関連記事を参照してください。