How To Create A Custom Dropdown With Direction Down Arrow In Css

For a a custom HTML dropdown, I want to get a directional down arrow style using CSS. But I am not able to achieve the directional arrow icon style for the dropdown as depicted in

Solution 1:

You can adjust your code like below:

select {
  /* styling */background-color: white;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em3.5em0.5em1em;
  --g:transparent 50%, gray 50%calc(50% + 1px), transparent calc(50% + 2px);
  background-image: 
    linear-gradient(45deg,  var(--g)), 
    linear-gradient(-45deg, var(--g));
  background-position: 
    right 20px  top calc(1em + 2px), 
    right 15px  top calc(1em + 2px);
  background-size: 5px5px;
  background-repeat: no-repeat;
  /* reset */margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<select><option>option 1</option><option>option 2</option><option>option 3</option></select>

Or consider the use of SVG like detailed here: How to add an SVG icon as select dropdown arrow?