How to change the color of a dropdown list without using an image?

Question

So, I'm trying to get the arrow in the select tag as a custom color. Example:

<input type="checkbox" class="checkbox1" checked="checked" /> <input type="text" spellcheck="false" size="20" /> <select class="dropdown"> <option value=">">&gt;</option> <option value="<">&lt;</option> <option value=">=">&ge;</option> <option value="<=">&le;</option> <option value="==">&#61;</option> <option value="!=">&ne;</option> </select> 

I saw a lot of tips to use the image instead, but I can't do it. Maybe using ▼ ▼ may be part of the solution?

Answer 1

LAST UPDATE : (jsFiddle: http://jsfiddle.net/ztayse92/ ) I made the arrow of the previous solution under the drop-down menu and used a transparent background. This is as beautiful as it can, and solves the problem of overlay / hover, independent of the area.

UPDATE: crack the answer without using the image: (jsFiddle: http://jsfiddle.net/swpha0s0/4/ )

I made a container with relative positioning, and I set the drop-down list and the overlay symbol (arrow) with absolute positioning. In CSS, I also completely remove the arrow styling. The only drawback is that since the arrow symbol is an overlay, it is not available for clicks or, in other words, when you click on the arrow, the drop-down list does not open. I made an arrow as little space as possible. I also thought about placing the click arrow on the arrow and opening the drop-down list using JavaScript, but according to this ( Can I use JS to open an HTML selection to show its list of options? ) This is not possible. I set the default cursor when you hover over the arrow so that the user does not accept the wrong feedback, and this can be made clickable. So, this is the closest solution for what you want - I'm curious why the images are not allowed and what is the use case for this?

HTML:

 <div class="parent"> <select class="dropdown"> <option value="&gt;">&gt;</option> <option value="&lt;">&lt;</option> <option value="&gt;=">&ge;</option> <option value="&lt;=">&le;</option> <option value="==">&#61;</option> <option value="!=">&ne;</option> </select><div class="overlay-arrow">&#9660;</div> </div> 

CSS

 select.dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: 22px 3px; background-size: 13px 13px; width: 40px; height: 20px; margin-left: 4px; position: absolute; cursor: pointer; } .overlay-arrow { font-size: 9px; color: red; position: absolute; right: 0px; top : 10px; cursor: default; line-height: 1px; } .parent { position: relative; width: 40px; height: 20px; float: left; margin: 0px; padding: 0px; } 

Original answer with image: (jsFiddle: http://jsfiddle.net/swpha0s0/2/ ):

I would advise you to use CSS as

 select.dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('http://www.durhamcollege.ca/wp-content/themes/dc/images/green_download_arrow.png') no-repeat; background-position: 22px 3px; background-size: 13px 13px; width: 40px; height: 20px; margin-left: 4px; } .dropdown-container { float :left; margin: 0px; } input { margin-top:4px; float: left; display: block; } input[type=checkbox]{ margin-top:8px; } 

You should statically change the position of the background and center it the way you like, but this is good if you just need to change the shape of the arrow or place your own image. This cannot be done without images / css or javascript (if you want to completely change the widget). You can switch the class when you click it to change the background so that you can shoot still higher.