标签：
在移动端使用原生的下拉列表（select）会有自带的样式，想要做到自定义样式怎么办呢？
首先第一步会去掉默认样式：-webkit-appearance:none;这些对input下的各类型属性，如：type="date"，会去掉默认样式，但是这时候对select设置的边框，宽度或者是文字居中显示等等样式都不起作用。这时候就需要模拟select框了。因为select在移动端上会用到手机默认的弹框，所以还是要用到select标签。
最终效果如图：
html结构如下：
1 <div class="select-area"> 2 <span class="select-value"></span> 3 <select> 4 <option>甘肃</option> 5 <option>兰州</option> 6 </select> 7 </div>
select-value用来存储下拉框选中的值，隐藏select，然后利用JS控制显示的下拉框的值。
1 .select-area{ 2 position: relative; 3 overflow: hidden; 4 } 5 .select-area select{ 6 position: absolute; 7 left: 0; 8 top: 0; 9 opacity: 0; 10 width: 100%; 11 }
接下来就是用到JS来控制选中值的显示了：
1 $(".select-area .select-value").each(function(){ 2 if( $(this).next("select").find("option:selected").length != 0 ){ 3 $(this).text( $(this).next("select").find("option:selected").text() ); 4 } 5 }); 6 $(".select-area select").change(function(){ 7 var value = $(this).find("option:selected").text(); 8 $(this).parent(".select-area").find(".select-value").text(value); 9 });
最终效果就是如上图显示的手机上的效果。
标签：
原文地址：http://www.cnblogs.com/huangxi/p/4702626.html
