エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSコーディングレシピ集(フォーム編) | Hypertext Candy
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSコーディングレシピ集(フォーム編) | Hypertext Candy
この記事では、CSS を学び始めの方を対象に、よくあるフォーム部品のコーディング方法を紹介します。 以... この記事では、CSS を学び始めの方を対象に、よくあるフォーム部品のコーディング方法を紹介します。 以下のシリーズ記事のフォーム編です。 CSSコーディングレシピ集(レイアウト編) CSSコーディングレシピ集(コンポーネント編) 入力欄のカスタマイズ テキスト入力欄、テキストエリア、セレクトボックスのカスタマイズ例です。 See the Pen Form by Masahiro Harada (@MasahiroHarada) on CodePen. .form-control というクラスに、角の丸さやパディングなど、フォーム部品共通のスタイルを持たせています。 ポイントは、input と select の高さを揃えるために、height に calc(1.5rem + 1rem + 2px) を指定している点でしょうか。 calc の計算の内訳は… 1.5rem = 文字サイズ 1re