在移动端使用原生的下拉列表(select)会有自带的样式,想要做到自定义样式怎么办呢?

  首先第一步会去掉默认样式:-webkit-appearance:none;这些对input下的各类型属性,如:type=”date”,会去掉默认样式,但是这时候对select设置的边框,宽度或者是文字居中显示等等样式都不起作用。这时候就需要模拟select框了。因为select在移动端上会用到手机默认的弹框,所以还是要用到select标签。

最终效果如图:

041633182058445

html结构如下:

1
2
3
4
5
6
7
<div class="select-area">
<span class="select-value"></span>
<select>
<option>甘肃</option>
<option>兰州</option>
</select>
</div>

select-value用来存储下拉框选中的值,隐藏select,然后利用JS控制显示的下拉框的值。

相应的样式如下:

1
2
3
4
5
6
7
8
9
10
11
.select-area{
position: relative;
overflow: hidden;
}
.select-area select{
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
}

接下来就是用到JS来控制选中值的显示了:

1
2
3
4
5
6
7
8
9
$(".select-area .select-value").each(function(){
if( $(this).next("select").find("option:selected").length != 0 ){
$(this).text( $(this).next("select").find("option:selected").text() );
}
});
$(".select-area select").change(function(){
var value = $(this).find("option:selected").text();
$(this).parent(".select-area").find(".select-value").text(value);
});

最终效果就是如上图显示的手机上的效果。

说明:需要在手机端才可以看到效果,pc端看不到效果!

selectdemo

查看演示

点击下载