移动端html添加option设置,移动端下select折腾一二

移动端想实现下图效果：

appearance: none

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

HTML标签的label属性

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

中国大陆(+86)

中国香港(+852)

布基纳法索(+226)

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

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

label标签结合select标签使用+86

中国大陆(+86)

中国香港(+852)

布基纳法索(+226)

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}`;

});