H5下拉框的自定义

今天做h5遇到个问题，我发现h5原生的下拉框很不好用，而且更改样式也不好改。所以我索性自己想办法自定义了一个下拉框的方法，在这里也算做个笔记以后有需要的时候可以找到。

效果如下：

自我感觉还不错，哈哈。

HTML代码： 

CSS代码：（也是最重要的代码）

这里其实是一些简单的布局。

.pullDown{

width:100%;

height:2.5rem;

}

.pullDown.select{

width:5rem;

height:2rem;

line-height:2rem;

font-size:0.85rem;

color:grey;

margin-top:0.25rem;

margin-left:0.75rem;

/*background-color: yellow;*/

}

.pullDown.icon{

margin-left:5.6rem;

position:absolute;

margin-top: -1.5rem;

}

这里是为了点击的时候小三角形会旋转90度

.icon_rotate{

transform:rotate(90deg);

-ms-transform:rotate(90deg);/* IE 9 */

-moz-transform:rotate(90deg);/* Firefox */

-webkit-transform:rotate(90deg);/* Safari && Chrome */

-o-transform:rotate(90deg);

}

.pullDown.seleUl{

margin-left:0.75rem;

position:relative;

z-index:2;

background-color:grey;

width:5rem;

height:6.6rem;

border-radius:0.5rem;

text-align:center;

font-size:0.9rem;

color:white;

display:none;

}

.seleUl.seleLi{

height:1.6rem;

line-height:1.6rem;

border-bottom:0.1rem solid white;

}

.seleUl.seleLi2{

height:1.6rem;

line-height:1.6rem;

}

.seleUl.checkSele{

margin-top: -1.35rem;

width:4rem;

margin-left: -2rem;

position:absolute;

z-index:3;

}

/*自定义复单选框的样式*/

这里要有单选框的目是为了选中以后能够获取选中的值，因为去后台请求数据不可能用中文去请求，所以只能用类型去请求，这样为了获取不同的类型去请求数据。（其实复选框也是一样的道理）

input[type="radio"]{

-webkit-appearance:none;

-moz-appearance:none;

appearance:none;

outline:none;

display:inline-block;

vertical-align:middle;

width:1rem;

height:1rem;

border-radius:1rem;

background-size:100%auto;

box-sizing:border-box;

background-position:0 0;

-webkit-tap-highlight-color:rgba(0,0,0,0);

/*-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符*/

-webkit-user-modify:read-write-plaintext-only;

background-color:rgba(0,0,0,0);

border:0;

}

/*单选框鼠标按下时增加的样式*/

input[type="radio"]:active{

background-color:rgba(0,0,0,0);

}

/*单选框选中后增加的样式*/

input[type="radio"]:checked{

background-position:0-36px;

-webkit-tap-highlight-color:rgba(0,0,0,0);

/*-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符*/

-webkit-user-modify:read-write-plaintext-only;

/*background: url("../img/confirm.png") no-repeat center;*/

background-color:rgba(0,0,0,0);

border:0;

}

/*单选框选中后增加的样式*/

input[type="radio"]:checked:active{

background-color:rgba(0,0,0,0);

}

input[type="radio"]::-ms-check{

display:none;

}

JS代码：

其实自定义这个下拉框，最主要的是CSS样式的应用。只要善于思考很多东西也是可以去自己自定义出来的。

简书：http://www.jianshu.com/p/c7a0a7695faf