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

12 回答

• 5

  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;
  

  }

  回复于 2024-05-02T08:49:17+08:00
• 116

  试试这个 ：

  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/

  回复于 2024-05-02T08:49:17+08:00
• 214

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

  我发现Solution在Chrome和Firefox（不在IE上）都很好用 . 将以下属性添加到SELECTelement的CSS中，并调整margin-top以满足您的需要 .

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

  希望这可以帮助 ：）

  回复于 2024-05-02T08:49:17+08:00
• 47

  试试这个对我有用，

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

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

  回复于 2024-05-02T08:49:17+08:00
• 2

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

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

  回复于 2024-05-02T08:49:17+08:00
• 2

  只是想完成这个主题 . 很明显，这在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;
  }
  

  回复于 2024-05-02T08:49:17+08:00
• 2

  Simple way to remove drop down arrow from select

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

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

  回复于 2024-05-02T08:49:17+08:00
• 3

  您无法通过功能齐全的跨浏览器支持来实现此目的 .

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

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

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

  如果您不想在右侧显示任何拖放图标，只需执行除右侧浮动图像之外的所有步骤 . 设置轮廓：选择标记的焦点为0 . 而已

  回复于 2024-05-02T08:49:17+08:00
• 314

  有一个名为DropKick.js的库，用HTML / CSS替换普通的选择下拉列表，这样你就可以用javascript完全设置和控制它们 . http://dropkickjs.com/

  回复于 2024-05-02T08:49:17+08:00
• 14

  试试这个：

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

  回复于 2024-05-02T08:49:17+08:00
• 6

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

  JS

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

  HTML

  <select class="first" id="first">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
  </select>
  

  回复于 2024-05-02T08:49:17+08:00
• 16

  我在Remove Select arrow on IE回答

  如果你想使用类和伪类：

  .simple-control 是你的css课程

  :disabled 是伪类

  select.simple-control:disabled{
           /*For FireFox*/
          -webkit-appearance: none;
          /*For Chrome*/
          -moz-appearance: none;
  }
  
  /*For IE10+*/
  select:disabled.simple-control::-ms-expand {
          display: none;
  }
  

  回复于 2024-05-02T08:49:17+08:00