input(テキストボックス,ラジオボタン)の文字色を変える方法

「入力中のテキストボックスの色を変えたい」

「選択されたラジオボタンの色を変えたい」

CSSでinput(テキストボックス,ラジオボタン)の文字色を変える方法を解説します。

ボタンの色を変える方法はこちら↓

【テキストボックス】valueの文字色を変える

文字の色を変えるにはCSS colorを指定します。

<style>
input[type="text"]{
    color: red;
}
</style>
<input type="text" value="テキストボックスinput">

テキストボックスは「input[type="text"]」で指定できます。その他、telやemailも使う場合はそれらも指定する必要があります。詳しくは下記をご覧ください。

colorが効かない場合は下記をご覧ください。

【テキストボックス】入力中だけ変える

入力中だけ文字色を変えたいときは「:focus」を指定します。

↓カーソルを当てると文字色が変わります。

<style>
input[type="text"]:focus{
    color: red;
}
</style>
<input type="text" value="テキストボックスinput">

「:focus」はその要素にフォーカスされているときだけ適用される疑似クラスです。

文字色だけでなく、背景色なども変えられます。

【テキストボックス】プレスホルダーの色を変える

プレスホルダーの色を変えるには「::placeholder」を指定します。

<style>
::placeholder{
    color: #ccc;
}
</style>
<input type="text" placeholder="プレスホルダー" value="">

プレスホルダーは入力すると消える文字です。例を提示するときによく使います。

これが濃い色だと入力済みだと勘違いされる場合があるため、薄い色にしておくといいでしょう。

ちなみにplaceholder属性は「type="text"」や「type="email"」などの入力系テキストボックスにしか使われないため、具体的なセレクタをつけずに「::placeholder」の指定だけでいいでしょう。

【ラジオボタン】ラベルの色を変える

ラジオボタンやチェックボックスの文字色を変えるにはlabelにcolorを指定します。

<style>
label{
    color: red;
}
</style>
<input type="radio" id="radio1" name="radio" checked><label for="radio1">ラジオボタンラベル1</label>
<input type="radio" id="radio2" name="radio"><label for="radio2">ラジオボタンラベル2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">ラジオボタンラベル3</label>

ラジオボタンの場合、文字を囲っているのはlabelタグになります。そのため、inputではなくlabelに色を指定する必要があります。

【ラジオボタン】選択された箇所の色を変える

ラジオボタンは選択されるとinputにchecked属性が付きます。

これは疑似クラス「:checked」でセレクタを指定できます。

inputがlabelの兄要素の場合

inputとlabelを兄弟要素で並べてidとforでつなぐ形です。

直後の弟要素セレクタは「+」で指定できます。

<style>
input[type="radio"]:checked+label{
    color: red;
}
</style>
<input type="radio" id="radio1" name="radio" checked><label for="radio1">ラジオボタンラベル1</label>
<input type="radio" id="radio2" name="radio"><label for="radio2">ラジオボタンラベル2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">ラジオボタンラベル3</label>

inputがlabelの子要素の場合

inputをlabelの子要素にするとidとforを指定する必要がなく楽になります。

ただし、子要素から親要素を選択することはできません。そのため、文字をspanで囲い、そのspanの文字色を変えるようにします。

ラジオボタンラベル1 ラジオボタンラベル1 ラジオボタンラベル1

<style>
input[type="radio"]:checked+span{
    color: red;
}
</style>
<label><input type="radio" name="radio" checked><span>ラジオボタンラベル1</span></label>
<label><input type="radio" name="radio"><span>ラジオボタンラベル1</span></label>
<label><input type="radio" name="radio"><span>ラジオボタンラベル1</span></label>

【まとめ】inputの文字色を変える方法

テキストボックス

• valueの色を変える
  →input[type="text"]にcolor
• 入力中だけ変える
  →:focus
• プレスホルダーの色を変える
  →「::placeholder」

ラジオボタン

• ラベルの色を変える
  →labelにcolorを指定
• 選択された箇所の色を変える
  →:checked+label（またはspan）

以上、input(テキストボックス,ラジオボタン)の文字色を変える方法でした。