title: How to create a custom dropdown with direction down arrow in css
body: <p>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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     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;
         }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;select&gt;
         &lt;option&gt;option 1&lt;/option&gt;
         &lt;option&gt;option 2&lt;/option&gt;
         &lt;option&gt;option 3&lt;/option&gt;
      &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Note:</strong> 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.</p>
  <p><a href="https://i.stack.imgur.com/8sOKI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8sOKI.png" alt="enter image description here" /></a></p>
  <p>Thanks!</p>