如何用css样式改变下拉菜单的样式? 您所在的位置:网站首页 miui12下拉菜单样式设置 如何用css样式改变下拉菜单的样式?

如何用css样式改变下拉菜单的样式?

2024-06-17 09:42| 来源: 网络整理| 查看: 265

  敲下如下代码:

        option1       option2       option3    

  你将会看到如下图的默认下拉选择框样式,

  虽然也无伤大雅,但如果你想让它更个性点呢,像这样?

  

  只需要改变下select的css样式就可以做到了~

  原理:将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。

 select { /*复写下边框,将边框颜色改为跟所在div的background一样的颜色,就看不到边框啦*/ border:1px solid #f5f5f5; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的下方中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll center bottom transparent; /*为下拉小箭头留出一点位置,避免被文字覆盖*/ padding-bottom: 10px; } 个性化下拉选择框完成!



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有