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

I am working on a [website](

[To see links please register here]

) (**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

[To see links please register here]

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](

[To see links please register here]

).

[![enter image description here][1]][1]


[1]:

I would use the after: selector on the p element.

p:after{
content: url("path/to/image");
}

The solution to pure CSS / HTML is available, but works through the hack when we extend the height through html size = "2" and then again narrow it through the height:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<p>
<select name="filter_31" id="search-box-filter_31" size="2" style="font-size:16px; height:24px;">
<option value="Vancouver Island University">University of Arizona</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>

<!-- end snippet -->

But I would not write such a code for a working project, instead it's better to use the js library, for example:
[

[To see links please register here]

][1]


[1]:

[To see links please register here]

The default select arrow icon is drawn by the browser. There is no API for you to tell the browser to replace the arrow icon, so you will need to restyle the select element and overlay your own arrows. You can draw your own arrows that have an identical style to your browser's arrows, but remember that the default icon will differ for other browsers and operating systems.

To restyle the select item using only CSS you will need to target both the select and its parent `p` element. The select has an ID, which is easy to target, but targeting that specific `p` element is not easy from just the code you've provided. However looking at the provided Wordpress site link there is a label just before the `p`, of the form `<label for="search-box-filter_31">Name of Institution</label>`. This means that the `p` element can be targeted using the CSS selector `label[for=search-box-filter_31] + p`.

You first need to ensure you have enough space for your new arrow. This is accomplished by increasing the select's width by the width of your new arrows, and adding the same amount to the parent `p`'s right padding. One way to change the select's width is by using `calc(100% + 30px)`. If your new arrows have the same width as the default icons you may not need to do this, but in some configurations your arrows may overlap the select's content.

Additionally the `p` element must shrink to fit its content. There are a few ways of doing this, but in your situation the one least likely to break formatting is setting `display: table`.

Finally, you can use the `::after` pseudo element on `p` to create the desired arrows, and overlay it on the end of your select element, hiding the default arrow. In the example below I created the arrows with inline SVG, but you can use any background image that best suits your situation. Set the `::after` element to have `position:absolute` and style it to fit exactly over the right hand side of the select. To create the blue gradient background under the arrows that you have in your image, use multiple backgrounds with the first being your arrows and the second being a CSS gradient.

Note that since the `::after` element is on top of the select, clicking the arrows will not display the options. You can set `pointer-events: none;` to pass the clicks through but this will not work on IE.

The CSS is below, or alternatively you can see it at the codepen

#search-box-filter_31 {
width: calc(100% + 30px);
}
label[for=search-box-filter_31] + p {
position: relative;
display: table;
border-radius: 5px;
padding-right: 30px;
}
label[for=search-box-filter_31] + p::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 30px;
border-radius: 0 5px 5px 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><polyline points='8,12,15,8,22,12' fill='none' style='stroke:white;stroke-width:2'/><polyline points='8,18,15,22,22,18' fill='none' style='stroke:white;stroke-width:2'/></svg>"),
linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

The result (followed by the default select as it appears in Firefox on Linux):

[![enter image description here][1]][1]

Of course, the arrows and their blue background can be styled in any other way that you wish. Please note that adding a custom style to the select arrows will make it look different to the default browser style. You can style it to fit in seamlessly in one browser, e.g. Chrome, but another browser, e.g. Firefox, will display things differently and your custom style will not match. To have a seamless appearance across all browsers and operating systems you would need to make sure all select/input elements are styled to match each other.


[1]:

May be this gives you some comfort as you say you can't touch the HTML. I was playing with CSS!

#search-box-filter_32 {
background-color: white !important;
font-size: 11px !important;
background: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png') no-repeat right #ddd;
background-position: 98%;
padding: 2px 20px 2px 8px;
padding-right: 20px;
background-size: 14px;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
outline: none !important;
-webkit-border-radius: 4px;
border: 1px solid #cccccc;
}

This is a simple and straight-forward example using a base64-encoded Font Awesome icon as background image for the select box.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

select {
background-color: white;
border: thin solid grey;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
select.arrows {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC');
background-position: calc(100% - .5rem), 100% 0;
background-size: 1.5em 1.5em;
background-repeat: no-repeat;
}

select.arrows:focus {
border-color: blue;
outline: 0;
}

<!-- language: lang-html -->

<p>
<select class="arrows">
<option value="Vancouver Island University">Vancouver Island University</option>
<option value="Western University">Western University</option>
<option value="Wilfrid Laurier University">Wilfrid Laurier University</option>
<option value="York University">York University</option>
</select>
</p>

<!-- end snippet -->

You can check this in [jsFiddle][1]

In addition a link to [Icomoon App][2], used to create the png image of the icon used.


[1]:

[To see links please register here]

[2]:

[To see links please register here]