CSS入力色の変更

CSS の入力要素は、Web サイトで最も頻繁に使用される要素の 1 つであり、テキスト ボックス、ラジオ ボックス、複数選択ボックスなどのさまざまな入力ボックスがフォーム内でよく見られます。ただし、これらの要素のデフォルトの色は、Web サイトのスタイル要件を必ずしも満たしているわけではありません。その場合、入力要素の色を変更するにはどうすればよいでしょうか?この記事では、Input 要素の色を変更するさまざまな方法を紹介します。

1. CSS を通じて入力要素の色を変更する

CSS では、以下に示すように、background-color 属性を使用して入力要素の背景色を設定できます。

# input{

background-color: #cccccc;

}

これを設定すると、Input 要素の色が灰色になります。テキストの色、境界線の色などの他のプロパティを設定することもできます。例:

input{

background-color: #ffffff;
color: #333;
border: 1px solid #333;

}

上記のコードは、Input 要素の背景色を白、テキストの色を濃い灰色に設定することを意味します。枠線の色を黒にします。

2. CSS を通じて入力要素のフォーカスの色を変更する

ユーザーが入力要素をクリックしたときに、その色も変更したい場合があります。このとき、:focus 疑似クラスを使用する必要があります。例:

input:focus{

background-color: #f8e5a1;
color: #333;
border: 1px solid #333;

}

これを設定した後、ユーザーが入力要素をクリックすると、その背景色、テキストの色、境界線の色が変化します。黄色の定数に変更します。

3. CSS を使用して入力要素のホバー色を変更する

:hover 疑似クラスを使用して、マウスを入力要素の上に置いたときの色を変更することもできます。例:

input:hover{

background-color: #f5f5f5;

}

これを設定した後、マウスを入力要素の上に置くと、その背景色が明るい灰色に変わります。

4. CSS を通じてさまざまなタイプの入力要素の色を変更する

さまざまなタイプの入力要素には、テキスト ボックス、ラジオ ボックス、複数選択ボックス、ボタンなどが含まれます。さまざまな CSS セレクターを使用してさまざまなタイプの入力要素を選択し、その色を変更できます。例:

input[type="text"]{

background-color: #ffffff;
color: #333;
border: 1px solid #ccc;

}

上記のコードは、テキスト ボックス タイプの入力要素を選択し、その背景色を設定することを意味します。白 に設定すると、テキストの色は濃い灰色に設定され、境界線の色は明るい灰色に設定されます。

input[type="checkbox"]{

/*设置复选框的颜色*/

}

input[type="radio"]{

/*设置单选框的颜色*/

}

input[type="submit"]{

/*设置提交按钮的颜色*/

}

5. JavaScript を使用して入力要素の色を変更する

CSS に加えて、次のこともできます。 JavaScript を使用して、入力要素の色を動的に変更します。たとえば、ボタンをクリックすると、テキスト ボックスの背景色が赤に変わります。これを実現するには、次のコードを使用します。

//ボタン要素を取得します

var btn = document.getElementById("btn");
//テキスト ボックス要素を取得します
var text = document.getElementById ("text");
//クリック イベントをボタンにバインドします
btn.onclick = function(){

text.style.backgroundColor = "#ff0000";

}

動的にJavaScript を使用して入力要素を変更する 色は非常に柔軟ですが、ページのパフォーマンスに影響を与える可能性があることに注意してください。したがって、JavaScript を使用して入力要素の色を変更する場合は、慎重に検討する必要があります。

概要

上記の方法により、Input 要素の色を簡単に変更できます。 CSS でデフォルトの色、フォーカスの色、ホバーの色などを設定したり、さまざまな CSS セレクターを使用してさまざまなタイプの入力要素を選択したりできます。 JavaScript を使用して、より柔軟な色の変更を実現することもできます。この記事がお役に立てば幸いです。

以上がCSS入力色の変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。