CSS & JS Effect – Styling Select

参考

YouTube – Custom select menu - CSS only

 

原装 select 的缺点

这是一个原装 select design

它最大的问题是没有 spacing. border 和 字需要有间距. 这样才能呼吸.

添加 padding

好看了一点点, 但是右边的小箭头依然没有 padding.

要想解决这个只能完全的 customize 它.

appearance: none

select {
  padding: 0.75rem;
  appearance: none;
}

appearance : none 可以完全把箭头 hide 起来.

wrapper + 定位做出小箭头

首先需要一个 wrapper, 因为 select 里面只能是 option, 不可以插入其它 element (比如箭头)

<div class="select-wrapper">
  <select>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Three">I am the king of the world</option>
  </select>
</div>

CSS

.select-wrapper {
  --padding-size: 1rem;
  --arrow-size: 0.75rem;

  select {
    border: 1px solid currentColor;
    padding: var(--padding-size);
    padding-right: calc(var(--arrow-size) + var(--padding-size));
    appearance: none;
  }

  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(calc(-50% + (var(--arrow-size) / 4)))
      translateX(calc(-1 * var(--padding-size) / 2));
    border: calc(var(--arrow-size) / 2) solid transparent;
    border-top-color: currentColor;
  }
}

::after 是做箭头, 然后配上一些定位和移位就可以了

效果