Create a custom select element with three options using HTML, CSS, and JavaScript.

by Alejandro M

HTML

<label for="miSelect">Elige:</label>
<select id="miSelect" class="custom-select">
  <option value="1">Opción 1</option>
  <option value="2" class="status-list">Opción 2</option>
  <option value="3">Opción 3</option>
</select>
<div  class="custom-select"></div>

CSS

.custom-select{
  -webkit-appearance: none; /* iOS/Safari */
  appearance: none;
  padding: 10px 40px 10px 12px; /* espacio para la flecha a la derecha */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;

  /* SVG como background (pequeño caret) - caracteres escapados */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.status-list:before {
    content:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}