如何添加SVG图标作为选择下拉箭头? [英] How to add an SVG icon as select dropdown arrow?

问题描述

自一个小时以来，我一直在尝试管理我的HTMl选择并用SVG替换下拉图标，但是我没有让它运行.

I'm trying since one hour to manage my HTMl selects and to replace the dropdown icon by an SVG but I don't get it running.

这是我的代码:

select {
    padding: 15px;
    border-radius: 3px !important;
    height: 50px !important;
    color: #ffffff !important;
    padding-right: 30px !important;
    font-size: 14px !important;
    border-color: blue !important;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: blue url("data:image/svg+xml;utf8,<svg height='24' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='#FFFFFF'/></g></svg>") no-repeat !important;
    background-position-x: 100%;
    background-position-y: 5px;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

我在这里做错了什么?

推荐答案

您需要调整视图框，因为在实际的视图框中看不到定义的路径.然后删除额外的高度定义，并删除!important以能够设置background-position

You need to adjust the viewbox as the path defined cannot be seen with the actual viewbox. Then remove the extra height definition and also remove the !important to be able to set background-position

select {
  padding: 15px;
  border-radius: 3px;
  height: 50px;
  color: #ffffff;
  padding-right: 30px;
  font-size: 14px;
  border-color: blue;
  position: relative;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: blue url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;
  background-position: right 5px top 50%;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

这篇关于如何添加SVG图标作为选择下拉箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！