我怎样才能做出选择呢？

Question

这是我的问题

​

​

我想复制这个形状的选择.我认为我可以通过放置一个:后，因为我想插入箭头，以及倾斜的效果。但根本不起作用。你对复制还有什么其他想法吗？谢谢

​

select {
  appearance: none;
  background: grey;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 1px;
  border: 1px solid #fff;
  border-right-width: 0;
  /* height: 40px; */
  width: 150px;
  max-width: 100%;
  padding: 10px 24px;
  color: #f9faff;
}

select::after {
  content: '';
  display: block;
  background: repeat: no-repeat;
  size: 10px;
  position: center center;
  image: svg-load('#{$svg-path}/arrow-down.svg', fill=$color-secondary);
}

<select>
  <option value="All" selected="selected">Tout</option>
  <option value="15">2021</option>
  <option value="16">2022</option>
</select>

​

Answer 1

你可以试试下面这样的方法。我用了我自己的箭头，但你可以用你的：

​

select {
  padding: 10px 15px;
  min-width: 150px;
  font-size: 14px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: 
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat right 10px top 50%,
    linear-gradient(-80deg,blue 50px,grey 51px);
  clip-path: polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)
}

<select>
  <option value="All" selected="selected">Tout</option>
  <option value="15">2021</option>
  <option value="16">2022</option>
</select>

​