How to create a custom dropdown with direction down arrow in css

Question

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 the sample image. So far I am only getting a triangle shaped down arrow as in the code snippet. How could I get the directional down arrow instead of a solid triangle?

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

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

Note: I can able to achieve triangle shaped down arrow using above CSS. But i need directional down arrow icon style as in the screen shot given below.

Thanks!

@TemaniAfif It really helps to me. Thanks for your great help. — arunsignit, Oct 26 '20 at 06:04

score 1 · Accepted Answer · answered Oct 26 '20 at 09:24

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.5em 3.5em 0.5em 1em;
  --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: 5px 5px;
  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?

answered Oct 26 '20 at 09:24

Temani Afif

245,468
26
309
415

Thanks for your help.. i need one more help that how can we increase the size of the arow in this code? – arunsignit Oct 26 '20 at 16:01
@arunsignit you change the background size like you want (the 5px 5px) and then you adjust the position of the first one. It need to be the position of the second one + the size. here you have 20px = 15px + 5px. Both should have the same top value – Temani Afif Oct 26 '20 at 16:03
@arunsignit related for more details around the use of background-position: https://stackoverflow.com/a/51734530/8620333 – Temani Afif Oct 26 '20 at 16:15

How to create a custom dropdown with direction down arrow in css

1 Answers1

Linked