移动端想实现下图效果:
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}`;
});