Select Arrow Style Change

Select arrow style change

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

Change HTML Select arrow background color

Some linear-gradient background-image hacks:

select {
  /* styling */
  background-color: black;
  color: white;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.classic {
  background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, black, black);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
}

<select class="classic">
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
</select>

How to change colour of select dropdown arrow?

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

How to change down-arrow on select tag

You can try this with pure css , first you need to remove the default behavior of the select tag with appearance:none property.

browser specified

appearance:none;
-webkit-appearance:none; /* chrome and safari */
-moz-appearance:none; /* Mozilla */
-ms-appearance:none; /* Internet explorer */
then you can set background-image

select { width:100px; float:left; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; border:2px solid #000; background:url('http://www.free-icons-download.net/images/small-down-arrow-icon-15593.png'); background-repeat:no-repeat; background-size:16px 17px; background-position:right 0px;}

<select>    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option></select>

Select box arrow style

Browsers and OS's determine the style of the select boxes in most cases, and it's next to impossible to alter them with CSS alone. You'll have to look into replacement methods. The main trick is to apply appearance: none which lets you override some of the styling.

My favourite method is this one:

http://cssdeck.com/item/265/styling-select-box-with-css3

It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).

Good luck :)

Select Arrow Style Change