html remove the default select option arrow with extra space from options

Question

I have a select option markup like this

<div class="styleselect">
  <select onchange="setLocation(this.value)" class="selections">
    <option selected="selected" value="position">Position</option>
    <option value="name">Name</option>
    <option value="price">Price</option>
  </select>
</div>

Here I want to style the default arrow of select option and I changed my css like this

.styleselect {
    background-color: #DFD3C3;
    background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
    background-position: 117px center;
    background-repeat: no-repeat;
    border: 1px solid #C5AF8A;
    overflow: hidden;
    vertical-align: middle;
    width: 140px;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.styleselect select {
    background-color: transparent;
    margin: 0 0 1px;
    padding: 4px;
    vertical-align: middle;
    width: 190px;
}

It worked fine. But again I got one problem that when I made click on the options the options came with the extra width from the actual width where it is looking really odd. I know that the extra width is coming from the width .styleselect select where I have put extra width. But that has been donefor the styling the arrow. Can someone kindly tell me how to fix the extrawidth so that the my custom arrow should come in place for default arrow in the select options and the extra width for the options will be also hide. The link for fiddle is here

Any help and suggestions will be really appreciable. Thanks

See this post: http://stackoverflow.com/q/1895476/703717 – Danield Aug 13 '13 at 07:01 — Danield, Aug 13 '13 at 07:01

Akki619 · Answer 1 · 2013-08-13T06:33:05.067

0

Here you go... I have added the same color for options also just to have an uniform look for the control. Hope it helps.

CSS code :

select{
   appearance:none; -moz-appearance:none; -webkit-appearance: none; 
    }
.styleselect {
    background-color: #DFD3C3;
    background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
    background-position: 117px center;
    background-repeat: no-repeat;
    border: 1px solid #C5AF8A;
    overflow: hidden;
    vertical-align: middle;
    width: 140px;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.styleselect select {
    background-color: transparent;
    margin: 0 0 1px;
    padding: 4px;
    vertical-align: middle;
    width: 140px;
}
.styleselect select option{
 background-color: #DFD3C3;            
    overflow: hidden;
    vertical-align: middle;
    width: 140px;
    padding: 0;
    margin: 0;
    display: inline-block;
}

edited Aug 13 '13 at 06:33

answered Aug 13 '13 at 06:07

Akki619

2,386
6
26
56

have you checked your code? It is hiding my arrow icon behind the default arrow fro select options... – NewUser Aug 13 '13 at 06:17
yes, its working fine in chrome 28. what version are you using? – Akki619 Aug 13 '13 at 06:19
yes..its working in chrome but what about firefox and other browsers? In firefox it is breaking... – NewUser Aug 13 '13 at 06:23
I have given a code to get you started buddy, please research for this. To get you started here is the link you need http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select – Akki619 Aug 13 '13 at 06:32

score 0 · Answer 2 · answered Aug 13 '13 at 06:33

0

Styling the select is cumbersome. You may get browser issues. But you can use advance plugin for styling select box like http://ivaynberg.github.io/select2/. This also provide lots of other features.

answered Aug 13 '13 at 06:33

maximus ツ

7,949
3
25
54

score -5 · Answer 3 · answered Aug 13 '13 at 05:57

-5

 .styleselect select {    
   width=auto;
  }

answered Aug 13 '13 at 05:57

ParVathi

109
1
12

But, you can always delete your answer which will credit all your downvotes. – maximus ツ Aug 13 '13 at 06:29
It's not even valid CSS. – putvande Jan 21 '15 at 11:30

html remove the default select option arrow with extra space from options

3 Answers3