パーツ番号 09-13-10 ・ CSSのみ

フォーム入力欄用スケルトン

ラベル・入力欄・送信ボタンを灰色ブロックで表現したフォームのプレースホルダー。問い合わせフォームや入力画面の読み込み待ち表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="form09-13-10">
          <div class="fgroup09-13-10">
            <div class="flabel09-13-10"></div>
            <div class="finput09-13-10"></div>
          </div>
          <div class="fgroup09-13-10">
            <div class="flabel09-13-10"></div>
            <div class="finput09-13-10"></div>
          </div>
          <div class="fgroup09-13-10">
            <div class="flabel09-13-10"></div>
            <div class="finput09-13-10 tall09-13-10"></div>
          </div>
          <div class="fbtn09-13-10"></div>
        </div>

CSS

.d09-13-10 .form09-13-10{
          width:100%;
          max-width:260px;
          font-family:sans-serif;
        }
        .d09-13-10 .fgroup09-13-10{
          margin-bottom:14px;
        }
        .d09-13-10 .flabel09-13-10{
          width:70px;
          height:9px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:8px;
        }
        .d09-13-10 .finput09-13-10{
          width:100%;
          height:34px;
          border-radius:6px;
          background:linear-gradient(135deg,#eef1f5,#f5f7f9);
          border:1px solid #e5e7eb;
        }
        .d09-13-10 .finput09-13-10.tall09-13-10{
          height:56px;
        }
        .d09-13-10 .fbtn09-13-10{
          width:100%;
          height:38px;
          border-radius:8px;
          background:linear-gradient(135deg,#cbd5e1,#dbe1e8);
        }

クラス名 .d09-13-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。