35

我正在尝试创建一个自定义下拉控件，我需要从本机控件中隐藏箭头。我正在使用以下内容CSS，它适用于 Chrome 和 Safari，但不适用于 Mozilla 和 IE。

select.desktopDropDown
{
    appearance: none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}

这是一个 [jsfiddle][1]。

4

5 回答 5

79

使用它会起作用，但适用于 IE10+ 和 FF ：

您的 CSS 应如下所示：

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

更多关于::ms-expand.

然后剩下的：

select.desktopDropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : url("../img/assets/arrow.png") no-repeat right #666;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

注意：我将路径硬编码"../img/assets/arrow.png"为背景。

这在 IE、Firefox 和 Opera 中应该很适合你。

于 2013-09-07T20:58:05.040 回答
19

简单的例子：

对于 IE：

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

对于火狐：

select {
    -moz-appearance: none;
    appearance: none;

    text-overflow: ''; /* this is important! */
}
于 2014-01-28T21:45:52.627 回答
3

对于 Fx，我使用-moz-appearance: checkbox-container效果很好。

因此，将所有这些放在一起对您来说应该足够了：

select.desktopDropDown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: checkbox-container;
    border-style: none;
}
select.desktopDropDown::-ms-expand {
    display: none;
}
于 2014-02-25T22:41:02.770 回答
3

事实上，IE10+ 主要需要这个技巧，其中箭头是 Windows 8 的 Metro 风格，即使在 Windows 7 上也是如此。虽然 Windows 8 用户必须习惯这种风格，因为它是通过操作系统使用的。无论如何，我建议不要使用：

display: none;

要使用：

visibility: hidden;

因为，至少在 IE 中，前者会导致选中项的蓝线在选中时覆盖下拉箭头，而后者不会。

于 2014-03-05T19:31:50.623 回答
0

我们可以使用 css 创建自定义。在 IE10、Mozilla 和 chrome borwser 上测试...
工作示例如下：

.customSelect {
  position: relative;
}

/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}

.customSelect:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 18px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.customSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  display: block;
  width: 100%;
  height: 50px;
  float: none;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}
<div class="customSelect">
  <label>
      <select>
          <option selected> Select Box </option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Last long option</option>
      </select>
  </label>
</div>

于 2017-06-22T10:42:00.070 回答