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

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

so i'm trying arrow in select tag 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 lot of advice utilize image instead, can't that. maybe using ▼▼ part of solution?

latest update: (jsfiddle: http://jsfiddle.net/ztayse92/) made arrow of previous solution under dropdown , used transparent background. perfect can , solves overlay/hover not clickable part problem.

update: hack reply without using image: (jsfiddle: http://jsfiddle.net/swpha0s0/4/)

i made container relative positioning , set drop-down select , overlay symbol (arrow) absolute positioning. in css remove arrow styling completely. drawback since arrow symbol overlay not clickable or in other words when mouse clicks on arrow drop downwards won't open. made arrow take to the lowest degree space possible. thought of putting click handler on arrow , open drop-down javascript according (is possible utilize js open html select show it's alternative list?) not possible. made cursor default when hover on arrow user doesn't take wrong feedback clickable well. closest solution want - curious why no images allowed , utilize case 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 reply image: (jsfiddle: http://jsfiddle.net/swpha0s0/2/) :

i suggest utilize css

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 statically alter background-position , center way if need alter arrow appearance or set own image. not possible without image/css or javascript (if want alter widget entirely). can toggle class when click alter background can have arrow pointing upwards too.

html css select arrow