パーツ番号 11-11-07 ・ CSSのみ

プルダウン抵抗感バウンス位置の固定表示

引っ張った量に対して途中までしか矢印が回りきっていない、ゴム的な抵抗感のある位置を静止画で切り取った見本です。更新操作のこだわった見た目を資料で説明する際に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-07-frame">
          <div class="d11-11-07-stretch"><span class="d11-11-07-arrow"></span></div>
          <div class="d11-11-07-list">
            <div class="d11-11-07-row"><span class="d11-11-07-av"></span><div class="d11-11-07-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-07-row"><span class="d11-11-07-av"></span><div class="d11-11-07-lines"><span></span><span class="short"></span></div></div>
          </div>
        </div>

CSS

.d11-11-07-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
        .d11-11-07-stretch{ height:42px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#eef1f8,#fff); border-radius:0 0 60% 60%/0 0 22px 22px; }
        .d11-11-07-arrow{ width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid #9aa4b5; transform:rotate(160deg); display:block; }
        .d11-11-07-list{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-07-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-07-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-07-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-07-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-07-lines span.short{ width:55%; }

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