如何实现html不显示下拉列表的箭头
导读:收集整理的这篇文章主要介绍了如何实现html不显示下拉列表的箭头,觉得挺不错的,现在分享给大家,也给大家做个参考。不显示下拉列表箭头的方法:首先给select元素和div元素设置宽度,其中div元素的宽度比select元素宽度多20px;然...
收集整理的这篇文章主要介绍了如何实现html不显示下拉列表的箭头,觉得挺不错的,现在分享给大家,也给大家做个参考。不显示下拉列表箭头的方法:首先给select元素和div元素设置宽度,其中div元素的宽度比select元素宽度多20px;然后在select元素里设置“overflow:hidden”即可实现效果。
本教程操作环境:windows7系统、CSS3& & HTML5版、Dell G3电脑。
html select 下拉箭头隐藏
!DOCTYPE html> html> head lang="en"> meta charset="UTF-8"> tITle> /title> style type="text/css"> .width5 { width: 122px; } .width7 { width: 142px; } /*设置Select样式*/ .SelectList { height: 32px; line-height: 32px; overflow:hidden; } /style> /head> body> div class="DivSelect width5"> select class="SelectList width7"> option> 双铜纸/option> option> 双胶纸/option> /select> /div> /body> /html>
这是正常状态下的效果,拥有箭头:
我们只需要在外面div里设置overflow: hidden; 即可实现隐藏箭头。
.DivSelect { overflow: hidden; /* 隐藏了小三角,宽度为比select宽度少20px */ }
效果如图:
由于该情况,有一部分没有边框,因此隐藏箭头时,为了美观,会将其设置成无边框。
推荐学习:html视频教程
以上就是如何实现html不显示下拉列表的箭头的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 如何实现html不显示下拉列表的箭头
本文地址: https://pptw.com/jishu/591159.html