手写select下拉框

下面是一个简单的手写select下拉框的示例代码：

<!-- HTML代码 -->
<div class="select-box">
  <select name="fruits" class="select-list">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
    <option value="pear">梨子</option>
  </select>
  <span class="select-arrow"></span>
</div>

/* CSS代码 */
.select-box {
  position: relative;
  display: inline-block;
}

.select-list {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: 1px solid #ccc;
  padding: 0.5rem;
  font-size: 1rem;
  width: 100%;
  max-width: 200px;
  cursor: pointer;
  background-color: white;
}

.select-arrow {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ccc;
  pointer-events: none;
}

这个示例使用了CSS的appearance属性来隐藏浏览器默认的select下拉框样式，并使用CSS伪类和伪元素来创建自定义的下拉框样式。同时，为了让下拉框箭头和下拉框本身位置对齐，我们使用了绝对定位和transform属性来实现。