Menu
I need your help.
I can't seem to wrap my head around this one and figure it out. How do I change the default Windows 7, IE 10 default arrow in the select box:
to make it look like this, using the custom arrow below:
.
Here is the arrow that I desire to use:
Here is my HTML markup:
<!DOCTYPE html> <html> <head> <style type="text/css"> select { font: normal 13px Arial; color: #000;} .container { border: 1px solid red; position: relative; width: 124px; height: 18px; overflow: hidden; } .inpSelect { color: black; background: #ffa; position: absolute; width: 128px; top: -2px; left: -2px; } </style> <script type="text/javascript"> </script> </head> <body> <div class="container"> <select class="inpSelect" name="xxx"> <option value="0" selected="selected">actual browser</option> <option value="1">IE</option> <option value="2">Firefox</option> <option value="3">Opera</option> <option value="4">Safari</option> </select> </div> </body> </html> 
446
It is this value that we have to alter. Setting this property to “none” will do the job. It explicitly tells the browser to not assign any other value to that property, which in turn results in the removal of the default arrow icon.
The select box arrow is a native ui element, it depends on the desktop theme or the web browser. Use a jQuery plugin (e.g. Select2, Chosen) or CSS. Show activity on this post. in Firefox 39 I've found that setting a border to the select element will render the arrow as (2).
You can skip the container or background image with pure css arrow:
select { /* make arrow and background */ background: linear-gradient(45deg, transparent 50%, blue 50%), linear-gradient(135deg, blue 50%, transparent 50%), linear-gradient(to right, skyblue, skyblue); background-position: calc(100% - 21px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; /* styling and reset */ border: thin solid blue; font: 300 1em/100% "Helvetica Neue", Arial, sans-serif; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; /* reset */ border-radius: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance:none; -moz-appearance:none; } Sample here
51
Working with just one selector:
select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; -webkit-appearance: none; background-position-x: 244px; } fiddler
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
