移动端下select折腾一二

移动端想实现下图效果：

appearance: none

当css设置appearance: none的时候，就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div，开发者就可以灵活设置样式了。

HTML<option>标签的label属性

label属性规定更短版本的选项。下拉列表中会显示出所规定的更短版本内容。

<select style="font-size:30px">
	<option label="+86" value="86">中国大陆(+86)</option>
	<option label="+852" value="852">中国香港(+852)</option>
	<option label="+226" value="226">布基纳法索(+226)</option>
</select>

PC端只有IE 7+支持label属性。安卓与PC端显示一致如下：

误打误撞。。。IOS下可以实现我们开篇的需求。

label标签结合select标签使用

<label id="labelEle" for="selectCity">+86</label>
<select id="selectCity">
	<option label="+86" value="86">中国大陆(+86)</option>
	<option label="+852" value="852">中国香港(+852)</option>
	<option label="+226" value="226">布基纳法索(+226)</option>
</select>

label{
    font-size:28px;
    background:url(...) no-repeat right center;
    padding-right:36px;
    margin-right:10px;
}
select{
    opacity: 0;
    width:70px;
    position:absolute;
    left:0;
    top:0;
}

select.addEventListener('change',event=>{

    label.innerHTML = `+${select.options[select.selectedIndex].value}`;

});