JSFiddle - React, Tailwind, and code Playground

HTML

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
    <option value="none" selected disabled>--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
    
</select>

CSS

option:checked {
  background-color: red;
  color: lightblue;
  opacity: .3;
  transform: translateX(10px);
  font-weight: 900;
}

label,
footer {
    font-family: sans-serif;
}

label {
    font-size: 1rem;
    padding-right: 10px;
}

select {
    font-size: .9rem;
    padding: 2px 5px;
}