select 美化手机端的样式

创建js mobileSelect.js

(function ($) {
$.fn.extend({
"pluginselector": function (clsN) {
var num = this;
var numVal = num.val();
var textCont = num.find('option:selected').text();
if(numVal ==""){
num.parent().find(clsN).html("<span>"+textCont+"</span>");
}
else {
num.parent().find(clsN).html(textCont);
}
num.on("change", function() {
var mark = this;
var o;
var opt = $(mark).find('option');//定义select里的option
opt.each(function(i) {
if (opt[i].selected == true) {
o = opt[i].innerHTML;//o的内容是选中的option里面的内容
$(this).attr("selected",true);
$(this).siblings().attr("selected",false);
}
});
var optionVal = $(mark).val();
if(optionVal == ""){
$(mark).parent().find(clsN).html("<span>"+o+"</span>");
}
else {
$(mark).parent().find(clsN).html(o);
}

});
}
});
})(jQuery);

html :

<div class="tdCont_box">
<p class="select_Cont"><span>请选择</span></p>
<select class="select_BTN" id="genderID">
<option value="">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>

css:

.tdCont_box{
width: 100%;
height: 44px;
position: relative;
}

.tdCont_box p.select_Cont{
width: 100%;
height: 16px;
font-size: 15px;
line-height: 16px;
text-align: left;
padding: 14px 0;
color: #666666;
background: url(../img/contImg_1.png) no-repeat right 19px;
background-size: 10px 6px;
}

.tdCont_box p.select_Cont span{
color: #bcbcbc;
}

.tdCont_box select.select_BTN{
-webkit-appearance: none;
-moz-appearance: none;
appearance:none;
direction: rtl;
color:#666666;
width: 100%;
height: 44px;
line-height: 44px;
font-size: 15px;
border: 0;
background-color: #ffffff;
position: absolute;
left: 0;
top: 0;
padding-right: 14px;
z-index: 4;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}

.tdCont_box select.select_BTN::-ms-expand {
display: none;
}

//方法引用

$("#genderID").pluginselector(".select_Cont");

这里我们也可以把显示内容的p标签改为input标签

也就要修改了改为

(function ($) {
$.fn.extend({
"pluginselector": function (clsN) {
var num = this;
var numVal = num.val();
var textCont = num.find('option:selected').text();
if(numVal ==""){
num.parent().find(clsN).val("");
}
else {
num.parent().find(clsN).val(textCont);
}
num.on("change", function() {
var mark = this;
var o;
var opt = $(mark).find('option');//定义select里的option
opt.each(function(i) {
if (opt[i].selected == true) {
o = opt[i].innerHTML;//o的内容是选中的option里面的内容
$(this).attr("selected",true);
$(this).siblings().attr("selected",false);
}
});
var optionVal = $(mark).val();
if(optionVal == ""){
$(mark).parent().find(clsN).val("");
}
else {
$(mark).parent().find(clsN).val(o);
}

});
}
});
})(jQuery);

美化后的样式