如何用css样式改变下拉菜单的样式? | 您所在的位置:网站首页 › miui12下拉菜单样式设置 › 如何用css样式改变下拉菜单的样式? |
敲下如下代码: 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 实验室设备网 版权所有 |