パーツ番号 09-03-03 ・ CSSのみ

空の検索結果

虫眼鏡のイラストと「見つかりませんでした」の文言、再検索ボックスをまとめた空状態。WordPressの search.php で検索ヒット0件のときに表示する画面に最適です。

css

プレビュー

ソースコード

HTML

<div class="d09-03-03-wrap">
          <svg class="d09-03-03-icon" viewBox="0 0 80 80" width="60" height="60" aria-hidden="true">
            <circle cx="34" cy="34" r="20" fill="none" stroke="#c3c9dd" stroke-width="5"/>
            <line x1="49" y1="49" x2="68" y2="68" stroke="#c3c9dd" stroke-width="6" stroke-linecap="round"/>
            <line x1="26" y1="34" x2="42" y2="34" stroke="#e06a8b" stroke-width="4" stroke-linecap="round" opacity=".55"/>
          </svg>
          <p class="d09-03-03-msg">見つかりませんでした</p>
          <div class="d09-03-03-box">
            <input type="text" placeholder="別のキーワードで検索" aria-label="再検索">
            <button type="button">検索</button>
          </div>
        </div>

CSS

.d09-03-03{background:#fbfbfd}
        .d09-03-03-wrap{text-align:center;width:100%;max-width:280px}
        .d09-03-03-msg{margin:12px 0 14px;color:#5a6280;font-weight:600;font-size:15px}
        .d09-03-03-box{display:flex;gap:6px}
        .d09-03-03-box input{flex:1;min-width:0;padding:8px 12px;border:1px solid #d5d9e6;border-radius:8px;font-size:13px;outline:none}
        .d09-03-03-box input:focus{border-color:#e06a8b}
        .d09-03-03-box button{padding:8px 16px;border:none;border-radius:8px;background:#e06a8b;color:#fff;font-size:13px;cursor:pointer;white-space:nowrap}

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