下拉列表框的标签,html5 下拉框标签

　　本文给大家讲h5、选择下拉框右边加图标，深度美化页面增进用户体验效果

　　1.那么我们先来看一下效果吧！

　　2.再看看h5的结构：

　　 div id= log in-div div class= select-wrapper select id= selector 1 选项值= 禁用选定请选择系统：/选项选项值=1 微信-苹果/选项选项值=2 微信-安卓/option/select img src= OSS we B- img/arrow。 png alt= class= arrow //div div class= select-wrapper select id= selector 2 option value= 禁用选定请选择渠道：/选项选项值=1 渠道1/选项选项值=2 渠道2/option/select img src= OSS we B- img/arrow。 png alt= class= arrow //div div class= select-wrapper select id= selector 3 option value= 禁用选定请选择大区：/选项选项值=1 大区1/选项选项值=2 大区2/option/select img src= OSS we B- img/arrow。 png alt= class= arrow //div div class= select-wrapper select id= selector 4 option value= 禁用选定请选择角色：/选项选项值=1 角色1/选项选项值=2 角色2/option/select img src= OSS we B- img/arrow。 png alt= class= arrow //div p id= notice 单个帐号只能领取一次奖励/p img src= OSS web-img/com fire 1。png alt= id= com fire 1 //div 3 .样式部分是用了厚颜无耻进行控制的，如果不会厚颜无耻也可以换成css。没有什么特别的运算需要转化，所以换成钢性铸铁也简单

　　@ function REM($ n){ @ return $ n/$ REM * 1 REM；} #login-div{ background: url(./ossweb-img/kuang1.png)0 0不重复；背景尺寸：100% 100%;宽度：雷姆(564);身高：雷姆(531);左边距：雷姆(38)；选择-包装器{位置：相对；显示器：flexjustify-content:居中；对齐-项目：居中；身高：雷姆(50);边距：REM(10)auto；padding-top:REM(15)；选择{宽度：雷姆(458)；身高：雷姆(63);左填充：REM(20)；边框：1px纯色# 23282d背景：# 23282d-WebKit-外观：无；颜色：# 92989f字体大小：雷姆(24);margin-top:REM(75)；边框半径：0;z指数：10;} .箭头{位置：绝对；宽度：雷姆(41);身高：雷姆(30);顶：雷姆(65);右：雷姆(80);指针事件：无；z指数：11;} } #通知{ font-size:REM(20)；颜色：# 92989f文本对齐：居中；margin-top:REM(75)；} # com fire 1 {宽度：雷姆(220)；身高：雷姆(78);margin-top:REM(20)；左边距：雷姆(174)；} }4.解析：主要是。箭这个元素进行右边那个图标的位置控制。利用位置：绝对；这个属性控制好位置，就基本没有问题了。

　　总结

　　以上是边肖介绍的HTML5和选择下拉框右边图标的实现代码。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读