今天做h5遇到個(gè)問題信殊，我發(fā)現(xiàn)h5原生的下拉框很不好用责掏，而且更改樣式也不好=改。所以我索性自己想辦法自定義了一個(gè)下拉框的方法砍鸠，在這里也算做個(gè)筆記以后有需要的時(shí)候可以找到。
效果如下：
自我感覺還不錯(cuò)耕驰，哈哈爷辱。
HTML代碼：
CSS代碼：（也是最重要的代碼）
這里其實(shí)是一些簡單的布局。
.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;
}
這里是為了點(diǎn)擊的時(shí)候小三角形會(huì)旋轉(zhuǎn)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;
}
/*自定義復(fù)單選框的樣式*/
這里要有單選框的目是為了選中以后能夠獲取選中的值朦肘，因?yàn)槿ズ笈_(tái)請(qǐng)求數(shù)據(jù)不可能用中文去請(qǐng)求饭弓，所以只能用類型去請(qǐng)求，這樣為了獲取不同的類型去請(qǐng)求數(shù)據(jù)媒抠。（其實(shí)復(fù)選框也是一樣的道理）
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有個(gè)副作用弟断，就是輸入法不再能夠輸入多個(gè)字符*/
-webkit-user-modify:read-write-plaintext-only;
background-color:rgba(0,0,0,0);
border:0;
}
/*單選框鼠標(biāo)按下時(shí)增加的樣式*/
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有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符*/
-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代碼：
其實(shí)自定義這個(gè)下拉框趴生，最主要的是CSS樣式的應(yīng)用阀趴。只要善于思考很多東西也是可以去自己自定義出來的。
