57

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:enter image description here to make it look like this, using the custom arrow below:enter image description here.

Here is the arrow that I desire 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>
Jatin
  • 3,065
  • 6
  • 28
  • 42
Jason Kelly
  • 2,539
  • 10
  • 43
  • 80
  • 1
    Fixed `width` `option` tag inside a `fixed` `width` wrapper element, with `background-image` on the wrapper element, use `background-transparent` on the `select` tag, and also use `overflow: hidden;` on the parent element, there you go, done... – Mr. Alien Mar 03 '14 at 17:21
  • 2
    Why do you need to do this? Just for pixel perfect in all browsers?? – epascarello Mar 03 '14 at 17:27

3 Answers3

77

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

ozil
  • 6,930
  • 9
  • 33
  • 56
vkjgr
  • 4,338
  • 1
  • 26
  • 19
  • 6
    Doesn't work in IE since it relies on -webkit-appearance and -mox-appearance. Although it sounds like Edge does support it "Microsoft Edge and IE Mobile support this property with the -webkit- prefix, rather than -ms- for interop reasons." - caniuse.com although that may be remedied by using "select::-ms-expand { display: none; }" – Mark Boltuc Jan 21 '16 at 15:19
  • Great! I also found it useful to give the select box a padding-right that is the same value as the 2.5em background-size; for small boxes or options with lots of text, the text then goes behind the "button" instead of on top of it. – Anthony F. May 17 '16 at 19:36
  • how can i remove the white backround from the arrow(in mozilla) and not the entire arrow – Faizal Hussain Jun 28 '18 at 07:38
  • Note that setting appearance to none also lets the browsers error message disappear when a select field is set to be required. – Hokascha Jan 20 '22 at 15:25
39

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

Julio Marins
  • 10,039
  • 8
  • 48
  • 54
  • 9
    This appears to only work in Chrome. In Firefox it doesn't work at all, and in IE it gives a mixed result. – Taylor Apr 06 '15 at 20:28
  • 1
    you did not use a class – quemeful Jan 30 '17 at 18:48
  • 2
    @Taylor just add select::-ms-expand { display: none; } in IE – crh225 Feb 27 '17 at 22:27
  • 1
    Taylor you should use: -moz-appearance:none; in order to work under firefox... actually the solution above is far less complicated and easier to maintain! – obinoob Aug 15 '17 at 13:59
  • 3
    A small improvement to your code change ` background-position-x: 244px;` to ` background-position: right;` to make it responsive – Connor Jan 22 '19 at 17:43
17

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;
}
Seth McClaine
  • 9,142
  • 6
  • 38
  • 64