Web Designer Wall

Snippets Dropdown

Bootstrap 5 Custom Select with Avatars and Icons (CSS only)

Native selects with avatars, status dots and priority icons: a task form that keeps the real select element, so it still works in browsers without customizable select support.

Bootstrap 5 No jQuery Oct 2026 

<section class="wdw-stage">
  <div class="container" style="max-width:640px">
    <form class="wdw-card p-4 p-md-5" id="taskForm" novalidate>
      <span class="wdw-eyebrow">New task</span>
      <h1 class="wdw-heading h3 mt-1 mb-4">Create a task</h1>

      <div class="mb-3">
        <label for="taskTitle" class="form-label fw-semibold small">Task title</label>
        <input type="text" class="form-control" id="taskTitle" name="title" value="Redesign the pricing page" required>
      </div>

      <div class="mb-3">
        <label for="taskAssignee" class="form-label fw-semibold small">Assign to</label>
        <select class="form-select pick" id="taskAssignee" name="assignee">
          <button type="button"><selectedcontent></selectedcontent></button>
        <option value="mara" selected>
          <img class="pick-avatar" src="https://i.pravatar.cc/64?img=47" width="32" height="32" alt="" loading="lazy">
          <span class="pick-text"><span class="pick-name">Mara Keller</span><span class="pick-sub">Design lead</span></span>
        </option>
        <option value="jonas">
          <img class="pick-avatar" src="https://i.pravatar.cc/64?img=12" width="32" height="32" alt="" loading="lazy">
          <span class="pick-text"><span class="pick-name">Jonas Brandt</span><span class="pick-sub">Front-end engineer</span></span>
        </option>
        <option value="priya">
          <img class="pick-avatar" src="https://i.pravatar.cc/64?img=45" width="32" height="32" alt="" loading="lazy">
          <span class="pick-text"><span class="pick-name">Priya Nair</span><span class="pick-sub">Content strategist</span></span>
        </option>
        <option value="tomas">
          <img class="pick-avatar" src="https://i.pravatar.cc/64?img=33" width="32" height="32" alt="" loading="lazy">
          <span class="pick-text"><span class="pick-name">Tomas Lind</span><span class="pick-sub">Motion designer</span></span>
        </option>
        </select>
      </div>

      <div class="row g-3 mb-4">
        <div class="col-sm-6">
          <label for="taskStatus" class="form-label fw-semibold small">Status</label>
          <select class="form-select pick" id="taskStatus" name="status">
            <button type="button"><selectedcontent></selectedcontent></button>
        <option value="backlog">
          <span class="pick-dot" data-status="backlog" aria-hidden="true"></span>
          <span class="pick-text"><span class="pick-name">Backlog</span><span class="pick-sub">Not scheduled yet</span></span>
        </option>
        <option value="progress" selected>
          <span class="pick-dot" data-status="progress" aria-hidden="true"></span>
          <span class="pick-text"><span class="pick-name">In progress</span><span class="pick-sub">Someone is working on it</span></span>
        </option>
        <option value="review">
          <span class="pick-dot" data-status="review" aria-hidden="true"></span>
          <span class="pick-text"><span class="pick-name">In review</span><span class="pick-sub">Waiting for feedback</span></span>
        </option>
        <option value="done">
          <span class="pick-dot" data-status="done" aria-hidden="true"></span>
          <span class="pick-text"><span class="pick-name">Done</span><span class="pick-sub">Shipped and verified</span></span>
        </option>
          </select>
        </div>
        <div class="col-sm-6">
          <label for="taskPriority" class="form-label fw-semibold small">Priority</label>
          <select class="form-select pick" id="taskPriority" name="priority">
            <button type="button"><selectedcontent></selectedcontent></button>
        <option value="low">
          <svg class="pick-icon" viewBox="0 0 20 14" width="20" height="14" aria-hidden="true" focusable="false"><rect x="2" y="8" width="4" height="4" rx="1" fill="currentColor" opacity="1"/><rect x="8" y="4" width="4" height="8" rx="1" fill="currentColor" opacity="0.25"/><rect x="14" y="0" width="4" height="12" rx="1" fill="currentColor" opacity="0.25"/></svg>
          <span class="pick-name">Low</span>
        </option>
        <option value="normal" selected>
          <svg class="pick-icon" viewBox="0 0 20 14" width="20" height="14" aria-hidden="true" focusable="false"><rect x="2" y="8" width="4" height="4" rx="1" fill="currentColor" opacity="1"/><rect x="8" y="4" width="4" height="8" rx="1" fill="currentColor" opacity="1"/><rect x="14" y="0" width="4" height="12" rx="1" fill="currentColor" opacity="0.25"/></svg>
          <span class="pick-name">Normal</span>
        </option>
        <option value="high">
          <svg class="pick-icon" viewBox="0 0 20 14" width="20" height="14" aria-hidden="true" focusable="false"><rect x="2" y="8" width="4" height="4" rx="1" fill="currentColor" opacity="1"/><rect x="8" y="4" width="4" height="8" rx="1" fill="currentColor" opacity="1"/><rect x="14" y="0" width="4" height="12" rx="1" fill="currentColor" opacity="1"/></svg>
          <span class="pick-name">High</span>
        </option>
          </select>
        </div>
      </div>

      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
        <p class="small wdw-muted mb-0" id="taskNote" role="status">Assignees are notified by email.</p>
        <button type="submit" class="btn btn-primary rounded-pill px-4">Create task</button>
      </div>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More dropdown snippets