How to make both up/down arrow in select input field in css?

I am working on a website (built on Wordpress, custom theme) in which I want to add up/down arrow in the select input field in CSS. The HTML code which I am using in order to create up/down arrow for the select input field is:

<p>
   <select name="filter_31" id="search-box-filter_31">
      <option value="Vancouver Island University">University of A</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

Here is the complete fiddle https://jsfiddle.net/ovp8Lxjw/4/embedded/result for the above code. At this moment, it has only down arrow.

In the above fiddle, I want to add both up/down arrow of blue color. At this moment, it shows only down arrow.

Problem Statement:

I am wondering what CSS code I need to add in the above fiddle so that I can see up/down arrow (as shown in the screenshot below, marked by an arrow) 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 website.

from How to make both up/down arrow in select input field in css?