HTML_CSS
Googleでログイン問題10：文字をハイライト化するスイッチを作ろう
チェックボックスと文字を横に並べて
チェックボックスにチェックが入ったら文字のボーダーを
蛍光ペンのようなハイライトカラーで塗ってみよう。
見本を参考に実装してください。
チェックボックスにチェックが入ったら文字のボーダーを
蛍光ペンのようなハイライトカラーで塗ってみよう。
見本を参考に実装してください。
期待する画面
解答ソースコード
<input id="text" type="checkbox">
<label for="text">チェックしたらこの文字をハイライトにしてください</label>
¥HTML¥
input:checked + label{
background: linear-gradient(transparent 70%, yellow 0);
}
¥CSS¥
補足
CSSでは、input:checkedとすることで、チェックボックスやラジオボタンでチェックされている状態を指定することができます。
また演算子の「+」を使う事で、隣接している要素を選択できるので+ labelと記述すれば「チェックがついている時のlabel属性」を指定できます。
また演算子の「+」を使う事で、隣接している要素を選択できるので+ labelと記述すれば「チェックがついている時のlabel属性」を指定できます。
#忍者CODE無料問題集で活動を記録しよう
完了にする！
1.HTMLの宣言をしてみよう
inputタグとlabelタグをしっかりと連結させる癖をつけましょう。
チェックボックスがcheckdになった時のセレクタの指定は
input:checked のように指定することができます。
そうすることで、チェックボックスにチェックがついてる時のパターンと
ついていない時のパターンが指定できます。
蛍光ペンのようなハイライトカラーをつけたい時は
linear-gradient で好きな色を合わせてみましょう。