title: How to make both up/down arrow in select input field in CSS?
body: <p>I am working on a <a href="http://test.caubo.ca/knowledge-centre/quality-productivity-database/" rel="noreferrer">website</a> (<strong>built on Wordpress, custom theme</strong>) in which I want to add <strong>up/down arrow in the select input field in CSS</strong>. The HTML code which I am using in order to create up/down arrow for the select input field is:</p>
  
  <pre><code>&lt;p&gt;
     &lt;select name="filter_31" id="search-box-filter_31"&gt;
        &lt;option value="Vancouver Island University"&gt;University of A&lt;/option&gt;
        &lt;option value="Western University"&gt;University of B&lt;/option&gt;
        &lt;option value="Wilfrid Laurier University"&gt;University of C&lt;/option&gt;
        &lt;option value="York University"&gt;University of D&lt;/option&gt;
     &lt;/select&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Here is the complete fiddle <a href="https://jsfiddle.net/ovp8Lxjw/4/embedded/result" rel="noreferrer">https://jsfiddle.net/ovp8Lxjw/4/embedded/result</a> for the above code. At this moment, it has only down arrow. </p>
  
  <p>In the above fiddle, I want to add both up/down arrow of blue color. At this moment, it shows only down arrow. </p>
  
  <p><strong>Problem Statement:</strong></p>
  
  <p>I am wondering what CSS code I need to add in the above fiddle so that I can see <strong>up/down arrow</strong> (<strong>as shown in the screenshot below, marked by an arrow</strong>) in the select input field in css. I can't make any changes in the HTML code as it is coming from inspect from the wordpress <a href="http://test.caubo.ca/knowledge-centre/quality-productivity-database/" rel="noreferrer">website</a>. </p>
  
  <p><a href="https://i.stack.imgur.com/uq01m.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/uq01m.jpg" alt="enter image description here"></a></p>