Question

我想从HTML <select>元素中删除下拉箭头。例如：

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

如何在Opera，Firefox和Internet Explorer中执行此操作？

enter image description here

Answer 1

不需要黑客或溢出。 IE上的下拉箭头有一个伪元素：

select::-ms-expand {
    display: none;
}

Answer 2

前面提到的解决方案适用于Chrome，但不适用于Firefox。

我发现Solution适用于Chrome和Firefox（不适用于IE）。将以下属性添加到SELECTelement的CSS中，并调整margin-top以满足您的需求。

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

希望这会有所帮助：）

Answer 3

从选择

中删除下拉箭头的简单方法

＆＃13;

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

＆＃13;

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

＆＃13;

Answer 4

试试这个：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin：http://jsbin.com/aniyu4/2/edit

如果您使用Internet Explorer：

select {
    overflow:hidden;
    width: 120%;
}

或者您可以使用选择：http://harvesthq.github.io/chosen/

Answer 5

试试这个：

HTML：

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS：

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Answer 6

试试这个对我有用，

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

你无法隐藏但是使用溢出隐藏你实际上可以让它消失。

Answer 7

只是想完成这个主题。很明显，这在IE9中不起作用，但我们可以通过一点点css技巧来实现。

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Answer 8

我在Remove Select arrow on IE

中回答

如果你想使用类和伪类：

<div id="graph_432240223" val="graphPie" class="ng-isolate-scope dc-chart">... Chart SVG renders just fine here ...</div> <div id="graph_432240223" val="graphPie2" class="ng-isolate-scope dc-chart">... Nothing ...</div>是您的css类

.simple-control是伪类

:disabled

Answer 9

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Answer 10

使用全功能的跨浏览器支持无法实现此目的。

尝试拍摄50像素的div，并在此右侧浮动所需的下拉图标

现在在div中，添加宽度为55像素的select标签（比容器的宽度更多）

我想你会得到你想要的东西。

如果您不想在右侧显示任何拖放图标，只需执行除浮动右侧图像之外的所有步骤。设置大纲：选择标记的焦点为0。就是这样

Answer 11

有一个名为DropKick.js的库，用HTML / CSS替换正常的选择下拉列表，因此您可以使用javascript完全设置样式并对其进行控制。 http://dropkickjs.com/

Answer 12

适用于所有浏览器和所有版本：

<强> JS

API

<强> HTML

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

如何从下拉列表中删除默认箭头图标（选择元素）？

12 个答案: