CSSコーディングレシピ集（フォーム編） | Hypertext Candy

この記事では、CSS を学び始めの方を対象に、よくあるフォーム部品のコーディング方法を紹介します。 以下のシリーズ記事のフォーム編です。 CSSコーディングレシピ集（レイアウト編） CSSコーディングレシピ集（コンポーネント編） 入力欄のカスタマイズ テキスト入力欄、テキストエリア、セレクトボックスのカスタマイズ例です。 .form-control というクラスに、角の丸さやパディングなど、フォーム部品共通のスタイルを持たせています。 ポイントは、input と select の高さを揃えるために、height に calc(1.5rem + 1rem + 2px) を指定している点でしょうか。 calc の計算の内訳は… 1.5rem = 文字サイズ 1rem × 行高 1.5 1rem = 上下のパディング 0.5rem × 2 2px = 上下のボーダー 1px × 2 です。rem