更改颜色和外观的下拉箭头 | 更改颜色和外观的下拉箭头

本文介绍了更改颜色和外观的下拉箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想更改下拉列表箭头的默认外观，使其在浏览器中看起来一样。有没有办法重写使用CSS或其他方式下拉箭头的默认外观和感觉？

I want to change the default appearance of the arrow of a dropdown list so that looks the same across browsers. Is there a way to override the default look and feel of the drop down arrow using CSS or otherwise ?

推荐答案

在此示例中，我实际上隐藏了默认箭头，并显示了自己的箭头。

In this example I am actually hiding the default arrow and displaying my own arrow instead.

HTML：

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

CSS：

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("images/downArrow.png") no-repeat right #fff;
  border: 2px solid #000;
}

这篇关于更改颜色和外观的下拉箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！