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

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中得到了这个输出。

如何将下拉框的宽度减小为与选择框相等。

- Kennedy

---

可能重复：https://dev59.com/6nI-5IYBdhLWcg3wu7Hv - Rahul Desai

@ Kennedy，请告诉我我的答案是否对您有用，或者您对答案有任何疑问。如果它对您有用，请接受我的回复作为正确答案 - 这样其他用户就可以从中受益：知道答案有效，并将问题标记为已解答。 - DhruvJoshi

@Kennedy，我希望你正在尝试我的最新代码片段而不是早期版本。这里是链接，相信我，我亲自在FF和Chrome上测试过。http://jsfiddle.net/9SfJ7/2/ - DhruvJoshi

@@DhruvJoshi：谢谢。 - Kennedy

Answer 1

您可以对css中的#styled-select select属性width进行更正。这是演示的fiddle链接

#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下箭头的一种方法。

- DhruvJoshi

---

当我将宽度更改为260像素时，在Firefox中出现了默认箭头。我已经在问题中上传了图像。 - Kennedy

@Kennedy 如果你认为我的答案有用，请将其标记为答案。 - DhruvJoshi

Answer 2

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

- Sam1604

Answer 3

请将 #styled-select select 的 width:282px 更改为父元素 #styled-select 的相同值 width:260px。

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

- Krish