今天做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样式的应用。只要善于思考很多东西也是可以去自己自定义出来的。
