Select / Dropdown

<style>
.bn-select-demo {
  --bn-select-focus: #E6E4DD;

  max-width: 320px;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-select-demo__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #979793;
}

.bn-select {
  width: 100%;
  padding: 0.7rem 2.2rem 0.7rem 0.9rem;

  font-family: inherit;
  font-size: 0.9rem;
  color: #E6E4DD;

  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(230, 228, 221, 0.2);
  border-radius: 6px;

  /* On enlève le style natif du navigateur et on dessine notre
     propre petite flèche en CSS pur (SVG encodé en data-URI) */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6E4DD'%3E%3Cpath d='M6 9l6 6 6-6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 14px;

  cursor: pointer;
}

.bn-select option {
  background: #0B0F10;
  color: #E6E4DD;
}

.bn-select:focus-visible {
  outline: none;
  border-color: var(--bn-select-focus);
  box-shadow: 0 0 0 3px rgba(230, 228, 221, 0.15);
}

</style>

<div class="bn-select-demo" data-fx-root>
  <label for="bn-select-1" class="bn-select-demo__label">Sélectionner une option</label>
  <select id="bn-select-1" class="bn-select">
    <option value="">Choisir...</option>
    <option value="exploration">Exploration</option>
    <option value="reflexion">Réflexion</option>
    <option value="signal" selected>Signal</option>
    <option value="philosophie">Philosophie</option>
    <option value="collection">Collection</option>
  </select>
</div>