select/redio 样式美化（select兼容ie9）

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);

});