CSS テキスト入力プロパティのガイド: color、background-color、border-color

CSS テキスト入力プロパティ ガイド: color、background-color、border-color

Web デザインにおいて、テキスト入力は非常に重要な部分です。 CSS color、background-color、border-color プロパティを使用して、テキスト入力ボックスのテキストの色、背景色、境界線の色を変更できます。この記事では、これらの属性の使用方法を紹介し、Web ページのデザイン時にテキスト入力ボックスのスタイルを柔軟に制御できるようにする具体的なコード例を示します。

1. color プロパティ

color プロパティは、テキストの色を設定するために使用されます。色は、16 進値、RGB 値、または事前定義された色名を使用して指定できます。

サンプル コード:

input[type=text] {
  color: #ff0000;  /* 设置文字颜色为红色 */
}

input[type=password] {
  color: rgb(0, 255, 0);  /* 设置文字颜色为绿色 */
}

input[type=number] {
  color: blue;  /* 设置文字颜色为蓝色 */
}

2. background-color プロパティ

background-color プロパティは、テキスト入力ボックスの背景色を設定するために使用されます。背景色は、16 進値、RGB 値、または事前定義された色名を使用して指定することもできます。

サンプル コード:

input[type=text] {
  background-color: #ffff00;  /* 设置背景色为黄色 */
}

input[type=password] {
  background-color: rgba(255, 0, 0, 0.5);  /* 设置背景色为半透明红色 */
}

input[type=number] {
  background-color: aqua;  /* 设置背景色为淡蓝色 */
}

3. border-color プロパティ

border-color プロパティは、テキスト入力ボックスの境界線の色を設定するために使用されます。前の 2 つのプロパティと同様に、境界線の色は 16 進値、RGB 値、または事前定義された色の名前を使用して指定できます。

サンプル コード:

input[type=text] {
  border: 1px solid #000000;  /* 设置边框颜色为黑色 */
}

input[type=password] {
  border: 2px dashed rgb(255, 0, 0);  /* 设置边框为虚线，颜色为红色 */
}

input[type=number] {
  border: 3px dotted lime;  /* 设置边框为点线，颜色为酸橙色 */
}

上記のサンプル コードを通じて、必要に応じてテキスト入力ボックスのスタイルを柔軟にカスタマイズできます。もちろん、これらのプロパティはテキスト入力ボックスだけでなく、テキスト フィールドやドロップダウン ボックスなどの他の入力要素にも適用できます。

概要:

CSS の color、background-color、border-color プロパティを使用すると、テキスト入力ボックスの色、背景色、境界線の色を簡単に変更できるため、より多くのことを実現できます。豊かさと多様性のウェブデザイン効果。この記事があなたのお役に立ち、創作意欲を高めるきっかけになれば幸いです。ご質問やご不明な点がございましたら、お気軽にお問い合わせください。

以上がCSS テキスト入力プロパティのガイド: color、background-color、border-colorの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。