Best IT Recipes

How to change the arrow selection field

I need your help.

I can't seem to wrap my head around this and figure it out. How to change the default default arrow for Windows 7, IE 10 in the selection box: enter image description here so that it looks like this: using the special arrow below: enter image description here .

Here is the arrow I want to use: enter image description here

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>
+35
html css html5 select css3
Mar 03 '14 at 17:19
source share
3 answers

You can skip the container or background image with a clean 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; }

Example here

+40
Feb 02 '15 at 9:16
source share

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

+22
Dec 24 '14 at 20:15
source share

CSS

 select.inpSelect { //Remove original arrows -webkit-appearance: none; //Use png at assets/selectArrow.png for the arrow on the right //Set the background color to a BadAss Green color background: url(assets/selectArrow.png) no-repeat right #BADA55; }
+11
Dec 12 '14 at 19:46
source share


More articles:


All Articles