select:
css:
.search-input {
border: 1px solid #cdcdcd;
width: 180px;
text-indent: 0.6em;
}
.sel_mask {
position: relative;
height: 30px;
display: inline-block;
text-decoration: none;
border: 1px solid #cdcdcd;
vertical-align: middle;
}
.sel_mask span {
position: absolute;
top: 0px;
left: 5px;
right: 20px;
height: 30px;
line-height: 30px;
display: inline-block;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sel_mask i {
display: inline-block;
position: absolute;
top: -1px;
right: -1px;
}
.select-bgc {
display: inline-block;
width: 27px;
height: 30px;
background: url(../img/arrow-down.png); /*替换默认箭头图片*/
}
.sel_mask select {
top: 0px;
left: 0px;
position: absolute;
height: 30px;
opacity: 0;
}
.search-input {
border: 1px solid #cdcdcd;
width: 180px;
text-indent: 0.6em;
}
js：
// select文件名获取（一页多个seclect）
$('.register-select').each(function (i,item) {
if($(item).find('option:selected').html() === '' || $(item).find('option:selected').html() === '请选择') {
$(item).siblings('span').html('请选择');
} else {
$(item).siblings('span').html($(item).find('option:selected').html());
};
$(item).change(function () { // 选择后替换内容并恢复箭头方向
$(item).siblings('span').html($(item).find('option:selected').html());
})
})
redio:
css:
.input-file {
opacity: 0;
height: 30px;
position: absolute;
}
.radio-icon {
display: inline-block;
width: 13px;
height: 14px;
background: url(../img/input-radio.png) no-repeat 0 0; /*替换默认选中点图片*/
vertical-align: middle;
}
.radio-icon-none {
display: inline-block;
width: 13px;
height: 14px;
background: url(../img/input-radio.png) no-repeat -13px 0px; /*替换默认未选中点图片*/
vertical-align: middle;
}
js:
// radio单选切换选中状态样式
function redioChecked(thisRedio) {
if (thisRedio.checked == true) {
var name = $(thisRedio).prop("name");
$('input.input-file[type=radio][name=' + name + ']').next('i').removeClass('radio-icon').addClass('radio-icon-none');
$(thisRedio).next('i').removeClass('radio-icon-none').addClass('radio-icon');
}
};
$('input.input-file[type=radio]').each(function (i,item) {
var thisRedio = this;
redioChecked(thisRedio);
})
$('input.input-file[type=radio]').change(function () {
var thisRedio = this;
redioChecked(thisRedio);
});
