How to reduce dropdown box width in the select box

Question

I have the select box field with downarrow image.when i have select ,dropdown box width is enlarge then the orginal select box width.

enter image description here

code :

<div id="styled-select">   
    <select name="group" id="group">
        <option val="">Please choose</option>
        <option val="1">Option 1</option>
        <option val="2">Option 2</option>
        <option val="3">Option 3</option>
        <option val="4">Option 4</option>
    </select>   
</div>  

#styled-select {
   width: 260px;
   height: 34px;
   overflow: hidden;
   background: url("../img/downarrow_blue.png") no-repeat right #fff;
   border: 1px solid #ccc;
   margin:auto;
   border-radius:6px;
}
#styled-select select {
   background: transparent;
   width: 282px;
   padding: 5px;
   font-size: 15px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-family:helvetica-roman;
   color:#9C9C9C;   
}

when i have changed #styled-select select { width: 260px; } . I got this output in firefox.

enter image description here

how to reduce dropdown box width is equal to the select box.

possible duplicate: http://stackoverflow.com/questions/1702186/set-width-of-dropdown-element-in-html-select-dropdown-options — Rahul Desai, Feb 14 '14 at 11:55
@Kennedy Please let me know if my answer worked for you or if you have any issues with the answer. Please accept my reply as correct answer if it worked for you- so that other users can benefit: from knowing that the answer works and by having the question marked as Answered. — DhruvJoshi, Feb 17 '14 at 13:06
@Kennedy I hope you are trying my latest fiddle and not the earlier version. Here's the link again and believe me I personally tested it on FF and Chrome. http://jsfiddle.net/9SfJ7/2/ — DhruvJoshi, Feb 18 '14 at 04:38

DhruvJoshi · Accepted Answer · 2014-02-18T04:38:55.413

Correction can be done to your css #styled-select select on property width . here's the fiddle link for demo

#styled-select select {
   background: transparent;
   width: 260px;
   padding: 5px;
   font-size: 15px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-family:helvetica-roman;
   color:#9C9C9C;   
    background-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    border: none;
    text-indent: 0.01px;
    text-overflow: '';
}

PS: Please note that the down arrow showing over your image is a feature of FF and is not expected to be corrected any time soon.

I now realise why you had put the extra width in first place as that is one way to solve for removal of FF down arrow.

when i have changed width to 260px.I got default arrow in firefox.I had uploaded image in question. — Kennedy, Feb 14 '14 at 12:07

score 0 · Answer 2 · answered Feb 14 '14 at 11:58

Set the equal width in both #styled-select and #styled-select select

   #styled-select {
       width: 260px;
       height: 34px;
       overflow: hidden;
       background: url("../img/downarrow_blue.png") no-repeat right #fff;
       border: 1px solid #ccc;
       margin:auto;
       border-radius:6px;
    }
    #styled-select select {
       background: transparent;
       width: 260px;
       padding: 5px;
       font-size: 15px;
       line-height: 1;
       border: 0;
       border-radius: 0;
       height: 34px;
       -webkit-appearance: none;
       font-family:helvetica-roman;
       color:#9C9C9C;   
    }

score 0 · Answer 3 · answered Feb 14 '14 at 11:59

Please change width:282px of #styled-select select in to same value width:260px of parent #styled-select..

JSFIDDLE: http://jsfiddle.net/nikhilvkd/6aPUh/1/

#styled-select select {
   background: transparent;
   width: 260px;/*change here*/
   padding: 5px 0;
   font-size: 15px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-family:helvetica-roman;
   color:#9C9C9C;   
}

How to reduce dropdown box width in the select box

3 Answers3