その他の Form要素といっても、さほど細かく必要でもないので、Input, Textarea のみ作っておこうと思う。 Textarea については次の記事で。

Input

検討するのは ボーダーに色を付ける、幅と高さ、角丸、hover ぐらいかな。

基本形

[html]

<input class="input" type="text" placeholder="Input">

Border Colors

枠線に色を付けるのに新しく用意するものはない。すでに作った.borderクラスを使うだけ。ただし、HTMLの行末に書かないと認識されない。.borderクラスを含める必要は無い（他の input バリエーションも同じく）。

[markdown]

<input class="input bdr-color" type="text" placeholder="Input">{: style="--bdr-color:aqua"}

Sizes

これも簡単で、標準の文字サイズが1.0remなので、font-size:xxremを変えるだけで高さが変わる。.small,.medium,.largeと標準以外に３種用意。

[markdown]

<input class="input small" type="text" placeholder="Small input">
<input class="input" type="text" placeholder="Default size">
<input class="input medium" type="text" placeholder="Medium input">
<input class="input large" type="text" placeholder="Large input">

Rounded

両側の角丸調整。丸さの調整.bordeerクラスで作った.bdr-radクラスを使う。

[markdown]

<input class="input rounded" type="text" placeholder="Default size">
<input class="input rounded bdr-rad" type="text" placeholder="Default size">{: style="--bdr-rad:12px"}

Hoverable

マウスを重ねた時の設定。hoverableで指定し、--hoverable-bg(背景色)、--hoverable-bdr-color(ボーダー色)、--hoverable-shadow(シャドー)を渡した値でアレンジできる。

下の例では、極薄紫のバック、ブルーのボーダー、薄いブルーグレーのシャドーが付く。

[markdown]

<input class="input hoverable" type="text" placeholder="Hover input">{: style="--hoverable-bg:ghostwhite; --hoverable-bdr-color:royalblue; --hoverable-shadow:inset 2px 2px 8px rgba(65, 105, 225, 0.2);"}

単に.hoverableクラスだけを指定して値を省略した時のデフォルトは地味。

--hoverable-bg: #fcfcfc;
--hoverable-bdr-color: #c0c0c0;
--hoverable-shadow: inset 1px 1px 4px rgba(65, 65, 65, 0.2);