How to change the select drop down arrow color without using an image?

Question

So I'm trying to get the arrow in a select tag to be 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've seen a lot of advice to use an image instead, but I can't do that. Maybe using ▼▼ could be part of a solution?

Answer 1

LATEST UPDATE: (jsFiddle: http://jsfiddle.net/ztayse92/) Made the arrow of the previous solution to be under the dropdown and used transparent background. This is as perfect as it can get and it solves the overlay/hover not clickable region problem.

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

I made a container with relative positioning and I put the drop-down select and the overlay symbol (arrow) with absolute positioning. In CSS I also remove the arrow styling completely. The only drawback is that since the arrow symbol is an overlay it is not clickable or in other words when the mouse clicks on the arrow the drop down won't open. I made the arrow take least space possible. I also thought of putting a click handler on the arrow and open the drop-down with JavaScript but according to this (Is it possible to use JS to open an HTML select to show its option list?) it is not possible. I made the cursor be default when you hover over arrow so the user doesn't take the wrong feedback that this is clickable as well. So this is the closest solution to what you want - I am curious why no images are allowed and what is the use case for that??

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 suggest you use CSS like that

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 have to statically change the background-position and center it the way you like but it is good if you just need to change the arrow appearance or put your own image. It is not possible to do that without image/css or javascript (if you want to change the widget entirely). You can toggle a class when you click it to change the background so you can have another arrow pointing upwards too.