CODEWITHSUNDEEP
htmlcssselectdrop-down-menubackground-color
kumareloaded
kumareloaded

Reputation: 3952

How to change the color of the select drop down arrow part?

Here I want to change the color of select drop down box arrow part. And this should also work in IE9, Firefox and other browsers. Now I have a drop down box like this

enter image description here

I want the arrow part to look like this

enter image description here

I think it can be achieved by just having light grey instead of the dark grey color. How can I do this?

Or by having this icon over the drop down using so called hack? Will it work in all browsers (IE9, Firefox, etc) ?

I tried browsing through all the solution on net, but can't get it working on IE9. So can someone please help me out?

Upvotes: 2

Views: 4800

Answers (3)

SW4
SW4

Reputation: 71150

Its not glamorous, but you can fake it relatively easily:

span {
  position: relative;
}
span:after {
  height: 100%;
  content: '\25BE';
  text-align: center;
  position: absolute;
  top: 1px;
  width: 15px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #828282));
  background-image: -o-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: -moz-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: -webkit-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: -ms-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: linear-gradient(to bottom, #F0F0F0 0%, #828282 100%);
  display: inline-block;
  right: 1px;
  line-height: 20px;
  pointer-events: none;
}
<span><select>
    <option>option</option>
</select></span>

Upvotes: 1

austinthedeveloper
austinthedeveloper

Reputation: 2601

Select boxes are incredibly inconsistent between browsers and hard to style. Consider switching to something that replaces select boxes like this. It works by using jQuery and hiding the actual select item. It can be turned on as easily as one line of code:

$("select").selecter();

The output would look something like this:

<div tabindex="0" class="selecter  closed">
    <select class="selecter_basic selecter-element" id="selecter_basic" name="selecter_basic" tabindex="-1">
        <option value="One">One</option>
        <option value="Two">Two</option>
    </select><span class="selecter-selected">One</span>
    <div class="selecter-options scroller">
        <div class="scroller-bar" style="height: 100px;">
            <div class="scroller-track" style="height: 100px; margin-bottom: 0px; margin-top: 0px;">
                <div class="scroller-handle" style=""></div>
            </div>
        </div>
        <div class="scroller-content"><span data-value="One" class="selecter-item selected">One</span><span data-value="Two" class="selecter-item">Two</span>
        </div>
    </div>
</div>

Upvotes: 1

doniyor
doniyor

Reputation: 37856

you can do it this way:

http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
 background: transparent;
 width: 268px;
 padding: 5px;
 font-size: 16px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 height: 34px;
 -webkit-appearance: none;
}
.styled-select {
 width: 240px;
 height: 34px;
 overflow: hidden;
 background: url(new_arrow.png) no-repeat right #ddd;
 border: 1px solid #ccc;
}

Upvotes: 1

Related Questions