I would like to add a margin right to that icon but i don't know to select it, and i did a lot of research about it...

my SCSS code:

 select{
  background-color: hsl(209, 23%, 22%);
  border-radius: 4px;
  box-shadow: hsla(0, 0%, 0%, 0.575) 0 0 10px -5px;
  color: #fff;
  padding: 0.75rem 1rem;


  option{
    font-weight: 400;
    font-style: italic;
    color: hsl(0, 0%, 65%);
  }

}

Screenshot of selector

CodePudding user response：

Well we can't, but we can remove it and add custom element or pseudo selectors If that works for you, here it is

<div>
   <select name="test" id="test">
       <option value="1">Option 1</option>
   </select>
</div>
<style>
select{
    padding: 0.75rem 2rem 0.75rem 1rem;
    border-radius: 4px;
    color: #fff;
    background-color: hsl(209, 23%, 22%);
    box-shadow: hsla(0, 0%, 0%, 0.575) 0 0 10px -5px;
    appearance: none;
}
select::-ms-expand {
    display: none;
}
div{
    position: relative;
    display: inline-block;
    color: #fff;
}
div::after{
    content: '\276F';
    transform: rotate(90deg);
    position: absolute;
    right: 12px;
    height: 22px;
    width: 10px;
    top: 10px;
}