从 <select> 元素中删除下拉箭头？ [复制]

Posted 2023-03-06

【中文标题】从 <select> 元素中删除下拉箭头？ [复制]

【英文标题】：Remove drop-down arrow from <select> element? [duplicate]

【发布时间】：2012-06-07 09:21:03

【问题描述】：

可能重复：How to remove the arrow from a <select> tag in Firefox

箭头只会在 Chrome 中消失。这是我正在使用的脚本：

<style type="text/css">
select 
    font-family: 'Viga', sans-serif;
    font-size:16px;
    color:#168ACB;
    padding: 5px 10px 5px 10px;
    margin: 0px 5px 5px 5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    background: #f8f8f8;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;

</style>

铬：http://i.imgur.com/Ocpux.png 火狐和 IE：http://i.imgur.com/5zGuX.png

【问题讨论】：

尝试将其封装在隐藏溢出的 div 中？ Div 将具有宽度

【参考方案1】：

试试看这个：

How to remove the arrow from a select element in Firefox

巧合的是我的评论：

“尝试将其封装在隐藏溢出的 div 中？Div 将具有宽度 ”

类似于最高投票的答案。