title: How to change the position of a drop down arrow in CSS
body: <p><strong>NOT A DUPLICATE-please read carefully and understand the question.I don't want to replace the arrow. I want to keep the arrow as the way it is and change it's position. <code>appearance:none</code> can hide the arrow and by setting <code>background:url()</code> I may be able to replace the arrow,but that's not my question</strong></p>
  <p>I have a dropdown list which appears good and works fine. We all know by default it adds a dropdown arrow at the right side of the dropdown list.Now what I want to do is to move the arrow bit lower to the position like <code>margin-top:5px</code>. But I can't find any <code>pseudo elements</code> or <code>classes</code> to write my code. I want to achieve this using only <strong>css</strong>. I found styles written to hide the element and add another one, but in my case I want to keep the icon as the way it is and change the position.</p>
  <p>HTML</p>
  <pre class="lang-html prettyprint-override"><code>&lt;select class=&quot;dropdown-select&quot;&gt;
     &lt;option value=&quot;&quot;&gt;Select Location&lt;/option&gt;
     &lt;option value=&quot;location-1&quot;&gt;Location 1&lt;/option&gt;
     &lt;option value=&quot;location-2&quot;&gt;Location 2&lt;/option&gt;
     &lt;option value=&quot;location-3&quot;&gt;Location 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>CSS</p>
  <pre class="lang-css prettyprint-override"><code>.dropdown-select{
    outline: none;
    border: none;
  }
  </code></pre>