百度移动端select下拉框样式是怎么弄的？

来源：蜘蛛抓取(WebSpider) 时间：2016-12-07 16:30 标签： select下拉框样式

在移动端使用原生的下拉列表（select）会有自带的样式想要做到自定义样式怎么办呢？

首先第一步会去掉默认样式：-webkit-appearance:none;这些对input下的各类型属性如：type="date"，会去掉默认样式但是這时候对select设置的边框，宽度或者是文字居中显示等等样式都不起作用这时候就需要模拟select框了。因为select在移动端上会用到手机默认的弹框所以还是要用到select标签。

select-value用来存储select下拉框样式选中的值隐藏select，然后利用JS控制显示的select下拉框样式的值

接下来就是用到JS来控制选中值的显示叻：

最终效果就是如上图显示的手机上的效果。

//使用伪类给select添加自己想用的图标

　　//通过定位将图标放在合适的位置

　　//给自定义的图标实现点击下来功能

我要回帖

更多关于 select下拉框样式 的文章

 

随机推荐