选择删除下拉箭头 - 跨浏览器

Posted 2023-03-05

【中文标题】选择删除下拉箭头 - 跨浏览器

【英文标题】：Select removing dropdown arrow - Cross-browser

【发布时间】：2014-04-22 09:54:24

【问题描述】：

我的代码在除IE 之外的所有浏览器中都运行良好。我为选择设置了样式，但无法删除IE 中的默认箭头。 简单代码：html

<form>
<label for="selectitem">Food Favorites</label>
<select id="selectitem">
    <option>Choose...</option>
    <option value="italian">Italian</option>
    <option value="japanese">Japanese</option>
    <option value="mexican">Mexican</option>
    <option value="vietnamese">Vietnamese</option>
</select>
</form>

CSS 代码：

form 
    position: relative;
    top: 50px;          


form * 
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    behavior: url(PIE.htc);


select, option 
    border: none;
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;

    body 
    background: #666;


form 
    position: relative;
    width: 340px;
    margin: 0 auto;
    font-weight: bold;
    color: #DDD;


select 
    background: #555;
    border-radius: 4px;
    width: 240px;
    height: 35px;
    background: url('select.png') no-repeat;
    color: #DDD;
    padding: 8px;
    outline: solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';



select:focus 
    background: url('select.png') no-repeat 0 -35px;


option 
    background: #666;
    color: #DDD;
    padding: 5px;
    text-align: center;

我设法用

删除了 Firefox 中的箭头

webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';

供选择的背景图片：http://i.imgur.com/PSolPt7.png

【问题讨论】：

行为：用于旧版 IE 支持的 url(PIE.htc)

我个人的看法是你不应该不设置表单元素的样式。人们已经习惯了他们看起来像他们的样子，而改变这会让他们感到困惑。

@ Niet the Dark Absol 你说的没错，但我的一些雇主要求为表单定制设计

【参考方案1】：

这是我问题的答案:) 火狐使用

select 

    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';

IE 使用

select::-ms-expand 
    display: none;

哪个 -ms-expand 是 Microsoft IE 的箭头

【讨论】：

抱歉报告：-moz-appearance: none;对我什么都没做。 FF 32，Mac OS X。

仅供参考。您忘记了 webkit 上的破折号。需要是-webkit-appearance: none;。也不适用于

【参考方案2】：

我成功使用jquery-selectBox

您的选择框自定义包含的 css 文件的样式。特别要删除箭头，修改 .select-arrow 使其具有 display:none

我的看起来如下：

.selectBox-dropdown .selectBox-arrow 
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    height: 100%;
    background: url(jquery.selectBox-arrow.gif) 50% center no-repeat;
    border-left: solid 1px #BBB;
    display: none;