在这篇博文中，我将解释如何改变选择下拉菜单中的箭头。本教程使用了CSS和HTML。
CSS是一种语言，它告诉浏览器如何显示东西。它可以用来改变你网站上的几乎任何东西，而其中一个东西可能是选择输入框中的下拉箭头。你可以通过改变其背景颜色或图像以及其他属性（如边框半径和盒影）来使用CSS。让我们来看看一些例子!
内容
如何设计CSS下拉箭头的样式？
许多网站，包括Mozilla开发者网络，都在寻找一种改变选择下拉箭头的方法。不幸的是，没有直接的CSS属性来改变选择标签中的箭头。
但为什么不呢？从理论上讲，这很简单。你有一个带有下拉列表的元素。如果你想改变它的外观，你所需要做的就是在CSS中对它进行配置。 你可以用CSS来改变下拉箭头。**首先，你需要通过使用appearance:none 属性来摆脱选择标签的默认行为。**你需要使用供应商前缀的CSS，即 appearance:none。 -webkit-appearance:none; /* safari和chrome */ -moz-appearance:none; /* Mozilla */ -ms-appearance:none; /* Ie */ 如果你使用上述的CSS，它将看起来像这样--- 在这里，你可以看到没有下拉图标存在。现在我们要为下拉箭头设计样式。你可以使用一个.png图片或SVG来创建你的选择自定义箭头。 HTML结构 <select class="select1"> <option value="car">Car</option> <option value="bike">Bike</option> <option value="train">Train</option> <option value="aeroplane">Aeroplane</option> </select> CSS .select1 { appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; background-position: calc(100% - 12px) center !important; background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat; padding: 8px 32px 8px 16px; } /* To remove the arrow of select element in IE */ .select1::-ms-expand { display: none; } 在上面的例子中，你可以看到我已经使用了删除选择框的默认样式。appearance:none; 在background-position 属性中，我使用了一个小的计算方法，即calc(100% - 12px) ，这样，它就可以正确对齐。 在background 属性中，我设置了一个svg图标作为下拉菜单。 **为了改变CSS选择箭头的位置，改变背景位置的值。**例如，calc(100% - 12px) 。根据你的需要，增加或减少这个值。 如何使用内联SVG内容作为背景图片？ 你可以直接使用.svg文件，或者如果你不想把.svg文件储存在你的服务器中，你可以直接使用它的内容。 要使用SVG内容作为背景图片，在任何文本编辑器中打开.svg文件。复制任何从<svg>到</svg> ，例如-。 <svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg> 现在在**url()**里面的背景属性中，先添加data:image/svg+xml, ，然后粘贴你复制的内容。 这就是你需要自己处理的问题，SVG内容中没有#（哈希）。如果SVG中含有十六进制的颜色，只需将**"#"**替换为%23 ，即#ffaabb ，就会变成%23ffaabb 。
