-1

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

Dalvin S.
  • 3
  • 5
  • Your question is incomplete. Where would you like to add margin, to the `select`? – Azu Sep 22 '22 at 17:28
  • Oh my bad. Yep i would like to add margin to the select's icon (it looks like arrow down) – Dalvin S. Sep 22 '22 at 17:37
  • You can't change this arrow as it comes automatically from the browser. If you want another arrow consider using an image or pure CSS. For example this: https://stackoverflow.com/questions/12668404/css-select-box-arrow-style – Azu Sep 22 '22 at 17:42
  • Alright, i get it, thanks man for helping me! – Dalvin S. Sep 22 '22 at 17:58

1 Answers1

0

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;
}
aarkaynegi
  • 66
  • 5