Question

我想知道如何删除或隐藏选择下拉列表中的默认箭头。

我不想为此使用javascript / jquery，我也不介意它在早期版本的IE中如何降级，但我不知道它为什么不被隐藏/删除。

仅供参考：我在此处使用自定义箭头的在线来源作为示例目的。

任何帮助将不胜感激。感谢。

＆＃13;

/* -- Styled Selects - wrapped due to FF appearance bug & MSIE -- */

.styled_select {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: auto;
  border: 1px solid #ccc;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -khtml-box-shadow: none;
  box-shadow: none;
}
.styled_select.match-width {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
.styled_select {} .styled_select select {
  position: relative;
  display: block;
  margin: 0;
  padding: 9px 32px 9px 12px;
  white-space: nowrap;
  width: 100%;
  font-size: 13px;
  font-size: 1.3rem;
  color: #666666;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-style: normal;
  border: none;
  background: transparent;
  cursor: pointer;
  -moz-appearance: window;
  -webkit-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  z-index: 2;
}
.styled_select select::-ms-expand {
  display: none;
  z-index: -999999;
}
.styled_select:hover {
  border: 1px solid #00adf1;
}
.styled_select:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  speak: none;
  content: '';
  z-index: 1;
}
.styled_select:before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin: -8px 0 0 -4px;
  background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png) no-repeat 50% 60%;
  speak: none;
  content: '';
}
.ie8 .styled_select select,
.ie9 .styled_select select {
  padding-right: 12px;
}
.ie8 .styled_select:after,
.ie9 .styled_select:after,
.ie8 .styled_select:before,
.ie9 .styled_select:before {
  display: none;
}

＆＃13;

<span class="styled_select">
          <select>
                <option value="">Select One</option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
          </select>
</span>

＆＃13;

Answer 1

如果您正在谈论隐藏IE8中的原生箭头，那么这是不可能的。在IE9中，您只需简单地覆盖它，如下所示：How to hide drop down arrow in IE8 & IE9?。

在更现代的浏览器上：

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

应该可以正常工作，但仅适用于支持它的浏览器：http://caniuse.com/#feat=css-appearance

但是，正如其他人所说，你在伪元素::before中有一个自定义箭头。如果你正在谈论这个箭头，那么只需删除所说的伪元素。

Answer 2

这是::before伪元素。只需从CSS中删除它：

.styled_select:before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin: -8px 0 0 -4px;
  background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png) no-repeat 50% 60%;
  speak: none;
  content: '';
}

/* -- Styled Selects - wrapped due to FF appearance bug & MSIE -- */

.styled_select {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: auto;
  border: 1px solid #ccc;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -khtml-box-shadow: none;
  box-shadow: none;
}
.styled_select.match-width {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
.styled_select {} .styled_select select {
  position: relative;
  display: block;
  margin: 0;
  padding: 9px 32px 9px 12px;
  white-space: nowrap;
  width: 100%;
  font-size: 13px;
  font-size: 1.3rem;
  color: #666666;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-style: normal;
  border: none;
  background: transparent;
  cursor: pointer;
  -moz-appearance: window;
  -webkit-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  z-index: 2;
}
.styled_select select::-ms-expand {
  display: none;
  z-index: -999999;
}
.styled_select:hover {
  border: 1px solid #00adf1;
}
.styled_select:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  speak: none;
  content: '';
  z-index: 1;
}
.ie8 .styled_select select,
.ie9 .styled_select select {
  padding-right: 12px;
}
.ie8 .styled_select:after,
.ie9 .styled_select:after,
.ie8 .styled_select:before,
.ie9 .styled_select:before {
  display: none;
}

<span class="styled_select">
          <select>
                <option value="">Select One</option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
          </select>
</span>

Answer 3

使下拉宽度超过它的包装宽度..并在下拉包装中添加隐藏的溢出.. 例如：

.dropdown {
width: 220px;
}
.dropdown-wrapper {
width: 200px;
overflow: hidden;
}

如何隐藏/删除自定义箭头的选择默认箭头

3 个答案: