how can i make this select?

user_11947976 0
Viewed 46

Here is my problem,

enter image description here

I would like to reproduce the select with this shape...I thought I could do it by placing an :after because I wanted to insert the arrow in it as well as the skew effect. but it doesn't work at all. Do you have any other ideas for reproduction? Thanks

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>

sass forms css
1 Answers

You can try something like below. I used my own arrow but you can replace with your:

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>

user_86203330
Related