1

出于某种原因，当放置在文本输入旁边时，我的自定义样式选择输入在 Firefox（适用于 Chrome/Safari）中被向上推。如果我删除overflow:hidden.styled div 上的 ，则选择输入会弹回正确的位置，但具有默认的向下箭头图标。

无论如何我可以隐藏向下箭头图标，同时仍然让选择元素保持在正确的位置？

此处示例（使用 firefox 查看发生了什么）：http: //jsfiddle.net/Q2sqX/

非常感谢

4

2 回答 2

1

将vertical-align属性设置middle为样式。

div.styled { 
    vertical-align: middle; /* Add this */
    display: inline-block;
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(http://www.onextrapixel.com/examples/pure-css-custom-form-elements/formelements-select.png) no-repeat right;
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}

工作示例：http: //jsfiddle.net/Q2sqX/5/

于 2013-05-27T22:18:12.950 回答
0

尝试放一个

vertical-align: middle;

在你的 div.styled 规则中

于 2013-05-27T22:16:09.970 回答