如何减少选择框中的下拉框宽度

Question

我有带有向下箭头图像的选择框字段。当我选择时，下拉框宽度会放大，然后是原始选择框宽度。

代码：

<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;   
}

当我改变了＃styled-select select {width：260px; }。我在firefox中得到了这个输出。

如何减少下拉框宽度等于选择框。

Answer 1

可以对属性#styled-select select上的css width进行更正。这是演示文稿的小提琴link

#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： 请注意，显示在图像上方的向下箭头是FF的一项功能，预计不会很快得到纠正。

我现在意识到为什么你把额外的宽度放在首位，因为这是解决FF向下箭头移除的一种方法。

Answer 2

在width和#styled-select

中设置相等 #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;   
    }

Answer 3

请将width:282px的{​​{1}}更改为父#styled-select select的相同值width:260px ..

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

#styled-select