在移动端使用原生的下拉列表（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

查看演示

点击下载