Posted at

【CSS猛者への道①】CSSのみで入力フォームのチェックを行う主な3つの便利技法を記録。


  • 「円熟者はそれ単体でゲームも作成できる」と言われるCSSの便利技法を調査・記録するだけの記事第一弾。

  • CSSのみでの「マリオ」や「絵画」のような、芸術作品に触れないと習得のきっかけにならない若年者。

  • 今回は、頻度が高い入力フォーム関連の3つの技法を記録することにしよう。


技法1: 入力フォームの空チェック


「placeholder-shown」属性を利用


結果


See the Pen
input-check-css
by taisuke oono (@t_o_d)
on CodePen.


内容


  • 今回の入力フォームのCSS部分で使用している属性は、「placeholder-shown」であり、これはplaceholder(仮テキスト)が表示されている時を示す。


  • つまり、下記のような指定でnotを用いることで、「placeholderが表示されていない時にボタンの透明度をあげて、ボタンをクリック可能状態にする」という意味になる。



index.html

<input placeholder="値を入力してください">

<button>登録</button>


index.css

/* opacityを利用して、初期状態の透明度を半分に。

pointer-eventsを利用して、初期状態のボタンクリック不可 */

button {
opacity: 0.5;
pointer-events: none;
}

/* not(:placeholder-shown)を利用して、
placeholderが表示されていない時に、
pointer-eventsを自動設定。
opacityの透明度も戻す。 */

input:not(:placeholder-shown) + button {
opacity: 1;
pointer-events: auto;
}



技法2: 入力フォームの形式チェック


「valid・invalid」属性を利用


結果


See the Pen
input-mail-check-css
by taisuke oono (@t_o_d)
on CodePen.


内容


  • 今回の入力フォームのCSS部分で使用している属性は、「invalid」「valid」であり、これはinputタグのtype属性で指定されている形式に合致している(valid)か、していない(invalid)時を示す。


  • つまり、下記のような指定で、「入力値が形式に合致しているかによって、背景色を変更する」という意味になる。



index.html

<input type="email" placeholder="メールアドレスを入力">

<button>登録</button>

/* valid属性を利用して、inputで指定した

type属性形式に該当しない場合の、背景色。 */

input:invalid {
background-color: #ee6666;
}

/* invalid属性を利用して、inputで指定した
type属性形式に該当する場合の、背景色。 */

input:valid {
background-color: #95f195;
}


技法3: 入力フォームの範囲チェック


「in-range・out-of-range」属性を利用


結果


See the Pen
input-number-check-css
by taisuke oono (@t_o_d)
on CodePen.


内容


  • 今回の入力フォームのCSS部分で使用している属性は、「in-range」「out-of-range」であり、これはinputタグのminやmax属性で指定されている数値の範囲に合致している(in-range)か、していない(out-of-range)時を示す。


  • つまり、下記のような指定で、「入力値が、指定した数値範囲を超えているかによって、背景色を変更する」という意味になる。



index.html

<input type="number" min="1" max="20">

<button>登録</button>


index.css

input:in-range {

background-color: #95f195;
}
input:out-of-range {
background-color: #ee6666;
}


まとめ


  • 今回はフォーム関連ということで、魅力デザインフォームを発見次第、お問い合わせ衝動が駆られる私を客観分析しながら、記事を書く。

  • 「シンプルイズベスト」と言う本質に気づく前に、若年性であることを利用して、絢爛デザインでの遊びを継続。

  • 次回は、頻度が高い「テーブルや一覧」関連を調査することにしよう。


参考