如何用css样式修改select下拉标签的默认箭头样式

阅读: 评论:0

如何用css样式修改select下拉标签的默认箭头样式

如何用css样式修改select下拉标签的默认箭头样式

当需求是不让用ui框架,而要手动修改一个select下拉列表的样式时…

像这样把图一改成图二:
(图一):

(图二):

代码如下:
select {/* 鼠标移上,变小手 */cursor: pointer;padding: 0 10px;/* 清除默认的箭头样式 */appearance: none;-moz-appearance: none;-webkit-appearance: none;/* 右侧添加箭头的背景图  自行调整位置 */background: url('img/xia.png') 210px center no-repeat #fff;
}

其他样式如边框,宽高等,可自行设置。

本文发布于:2024-02-05 05:26:36,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170725181963432.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:样式   箭头   如何用   标签   css
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23