パーツ番号 04-06-09 ・ CSSのみ

テキストエリア(複数行)スタイル

複数行の入力に対応したテキストエリアの見た目です。お問い合わせフォームの本文欄やご意見欄に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-06-09-wrap">
          <label class="d04-06-09-label">お問い合わせ内容</label>
          <textarea class="d04-06-09-textarea" readonly>ご質問の詳細をこちらにご記入ください。</textarea>
        </div>

CSS

.d04-06-09-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d04-06-09-label{font-size:13px;color:#374151;font-weight:600}
        .d04-06-09-textarea{width:100%;box-sizing:border-box;height:80px;resize:none;padding:10px 12px;border:1.5px solid #cbd5e1;border-radius:6px;font-size:13px;line-height:1.6;color:#374151;background:#fff;font-family:sans-serif}

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