input原本的下拉選單太過擁擠，想製作出好看的下拉選單可以參考這邊呦～

HTML

先製作選單input值，讓input內文字能夠顯示出所選選項。

<div class="selectBox" tabindex="0">
  <input id="0" class="selectBox__radio" type="radio" name="restaurant" checked>
  <p class="selectBox__title">請選擇您喜歡的顏色</p>
  <input id="1" class="selectBox__radio" type="radio" name="restaurant">
  <p class="selectBox__title">紅色</p>
  <input id="2" class="selectBox__radio" type="radio" name="restaurant">
  <p class="selectBox__title">黑色</p>
  <input id="3" class="selectBox__radio" type="radio" name="restaurant">
  <p class="selectBox__title">白色</p>

再製作下拉的選單label

<ul class="selectList">
  <li>
    <label for="1" class="selectList__label"><img class="selectList__icon" src="https://upload.cc/i1/2021/03/12/Cw4j5v.png" alt=""> 紅色</label>
  </li>
  <li>
    <label for="2" class="selectList__label"><img class="selectList__icon" src="https://upload.cc/i1/2021/03/12/0WcJB7.png" alt=""> 黑色
   </label>
  </li>
  <li>
    <label for="3" class="selectList__label"><img class="selectList__icon" src="https://upload.cc/i1/2021/03/12/0nhvcQ.png" alt=""> 白色</label>
  </li>
</ul>
</div>

CSS

input框設計，讓原本的內容隱藏。

.selectBox{
  width: 220px;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  margin: 0 auto;
}
.selectBox__radio{
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: -1;
}
.selectBox__title{
  display: none;
  padding: 0 15px;
}
.selectBox__radio:checked + .selectBox__title{
  display: block;
}

下拉選單label定位，並且先隱藏。

.selectList{
  position: absolute;
  top: 35px;
  padding: 0;
  width: 100%;
  box-shadow: 0 15px 10px 0px rgba(0,0,0,0.1);
  list-style: none;
  
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s;
}
.selectList__label{
  display: block;
  padding: 10px;
}

當點選selectBox時才顯示選單。

.selectBox:focus .selectList{
  max-height: 200px;
}