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

how to change select dropdown arrow css
css select arrow font awesome
drop down arrow css style
how to change select box arrow image in css
select> <option dropdown position
bootstrap select dropdown icon change
css style select option dropdown
webkit-appearance select arrow

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.

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

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;
}
<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>

HOW TO, Let's go over the basic HTML markup of a select field: This is how we'll set it up now: HTML. <div class="select-wrapper"> <select> I also utilized Font Awesome for down arrow icon so you could do the same if you'd like or  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.

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 https://codepen.io/jla-/pen/ZqbWMj

#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):

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.

How to Style Select Fields using CSS and Font Awesome, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. CSS. CSS Reference CSS Browser Support CSS Selector Reference How TO - CSS Arrows Right arrow: Left arrow: Up arrow: Down arrow:  The CSS : We will basically use the : after selector to add our new characters and rotate them. Since we are using absolute property to position the arrows your top div needs to have a relative property in it. The next thing is the magical appearance: none .selectdiv select {} It hides the standard button. So the final magical CSS

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

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

How To Create Arrows/Triangles with CSS, By default, the drop-down will only open when the down arrow (▾) is clicked. To make the box open when the top content is clicked, you need to add except two things: first, the element can be shifted left, right, up or down For example, you could rotate text 30 degrees and still select it with the mouse. These controls include up and down arrows that increase and decrease the numeric value of the field when clicked, respectively. Removing the controls can be accomplished with a little CSS using the appearance property: /* Remove controls from Firefox */ input[type=number] { -moz-appearance: textfield; }

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:

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

Line-by-line: advanced CSS tricks for click-to-open drop-down lists , Have you ever faced the problem that the HTML tag select has with its default Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+ For example you can style the borders, the size of the box, the font style and size, the colours etc. See the custom-dropdown.css file on my GitHub for more details about the  Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

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;
        }

https://codepen.io/mohan-wijesena/pen/dgMBLY

Cross-Browser Custom Select Tag Arrow, As we all know select element does not allow pseudo classes and arrow.png is not that good solution too. So here's a css solution with "linear-backgrou Is it possible to apply a style in the inner "up arrow" and "down arrow" of a <input type="number"> in CSS? I would like to change the background of the up arrow to blue and the down arrow to red. I would like to change the background of the up arrow to blue and the down arrow to red.

SELECT right-arrow with CSS, The appearance property is used for one of two reasons: Or you could take a input with type=text and just make it look like a search input: scrollbarbutton-up; scrollbarbutton-down; scrollbarbutton-left -moz-win-media-toolbox; tooltip; treeheadercell; treeheadersortarrow Leave this field empty. Now within that div, add the select tag with a width of 55 pixels maybe (something more than the container's width) I think you'll get what you want. In case you do not want any drop icon at the right, just do all the steps except for floating the image at the right. Set outline:0 on focus for the select tag. that's it.

appearance, The font-family won't cascade into the select though, you have to explicitly declare corner input box, but still has the interactions of a select (click to reveal menu, that default selects have, which include: keyboard events like up and down arrow on both the real (hidden) drop-down as well as the styled (DIV) drop down. Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

Dropdown Default Styling, While there are still difficulties using CSS with HTML forms, there are ways to As we saw in the previous article, text fields and buttons are perfectly easy to style; now Elements involved in creating dropdown widgets, including <select> as possible, and lets you build up the styles yourself using CSS. Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

Comments
  • stackoverflow.com/questions/14218307/select-arrow-style-change This will help you
  • @Francesco Fortin It didn't help much. I need to make both up/down arrow in select input field in css. The above question has only one down arrow.
  • The screenshot you posted is from OSX, and you want it to also display that same up/down arrow on other operating systems like Windows? @FrancescoFortin looks correct but you'd need to supply your image to have the up and down arrow there.
  • Checking. Stay tuned.
  • @john i think you won't have a problem. It will look the same on most browsers if not all. It was checked on Edge,FF,Opera and Chrome (for Win desktop).
  • I have accepted your answer. I think it worked. I have awarded the bounty as well. I have one more similar question. I am wondering if you can have a look. It is something related wordpress plugin css. I am stuck on this from the last 24 hours
  • We have limited options as we can't change the html. Only option left is css.
  • The example I posted is CSS.
  • Yeah, I know. I am just telling.
  • You are using an image for the arrows, correct? This should definitely work for you.
  • Thats all coming from wordpress forms. I am not using anything.
  • I can't make any changes in the html code because that's all coming from wordpress after doing inspect. The only place where I can do changes is the CSS. I am wondering if you know CSS which can solve it.
  • This task can not be solved only by CSS. You will need javascript anyway. Any solution to this problem only using CSS will cause problems in different browsers and operating systems.
  • Let's decide first, do you just need an icon on the right with up and down arrows, so that a dropdown will appear when you click on the arrows? Or do you need these arrows to be fully-fledged workers, that is, a separate behavior for these two arrows? It would be better if you find a working example of what you want on the web, perhaps on some site and add a link to your question.
  • Your first point makes sense to me. I need an icon on the right with up and down arrows of blue color and a drop-down should appear when we click on the arrows.