html - 如何添加 SVG 图标作为选择下拉箭头?
问题描述
一小时以来,我一直在尝试管理我的 HTMl 选择并用 SVG 替换下拉图标,但我没有让它运行。
这是我的代码:
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
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>
推荐阅读
- python - 我在 Keras 中正确理解了 batch_size 吗?
- ios - 如何在没有 Xcode 7.2 和 iOS 12 开发帐户的情况下创建 .IPA 文件并安装应用程序
- php - 在 Woocommerce 中为两个或更多购物车商品启用免费送货
- gnu-make - 如何在 Makefile 中使用 notdir、通配符和 patsubst?
- java - Java BigDecimal divideAndRemainder 抛出除法不可能异常
- java - 解释器模式和访问者模式有什么区别?
- javascript - 我希望 html 选择的 ID 和名称具有不同的值
- jquery - 如何遍历指定 div 的非直接输入子项
- python - 如何使用 Opencv python 删除多个多边形
- shell - if (( ... )) 的 POSIX 兼容替代方案是什么?