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樣式的應用。只要善於思考很多東西也是可以去自己自定義出來的。