select样式重置

原生的select在不同系统的浏览器显示不一样。
最近chrome静鸡鸡地升级了，
windown系统chrome下拉框有明显的黑边。
原生的select并不支持css的完全改造，用尽全部力尽也只能修改它的输入框

select{
    min-width: 200px;
    height: 28px;
    border-radius: 0;
    border: 1px solid #BFBFBF;
    background: #fff;
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    appearance:none;  
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAG0mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDUtMjdUMTc6MzA6MjArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA1LTI3VDE3OjQzOjAxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA1LTI3VDE3OjQzOjAxKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYyM2U2YjgzLWU0ZTUtNDM5NC05YTUwLTE2ZTI5NTJiNjg1ZSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjFiOGMwZjU4LWI3YmUtMjE0OS1iYjhkLWU4YTdiODg2ZjI2MyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmIwMGZmY2E0LTg5NzQtNGE3OS1hYTZjLWRiMWY5YTliOGEzMSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjAwZmZjYTQtODk3NC00YTc5LWFhNmMtZGIxZjlhOWI4YTMxIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI3VDE3OjMwOjIwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDhhNDk5ZmMtMmNhZS00ZTBkLTk5YWUtMDkyZWNhYTBkYWVlIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI3VDE3OjMyOjAxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NjIzZTZiODMtZTRlNS00Mzk0LTlhNTAtMTZlMjk1MmI2ODVlIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI3VDE3OjQzOjAxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Vs+6gAAAAS0lEQVQokWP8//8/A7mAiWydDAwMjJFxqQStXrZwFiNWm3FJENLIwAB1Ni4FhAxmwqWQkEYGBgYGhv///6PgyLjU/+hiuDDjgEUVABg9QUKSxMkhAAAAAElFTkSuQmCC") no-repeat scroll right center transparent;
    padding-right: 20px;
}

appearance:none; 隐藏select原生的样式，并用background引用图片来重画下拉的图标；
下拉的列表无能为力了。
撸起袖子用js重写了一个，
不改变原来html的结构的基础上，
重写的思路：复制它的数据 --> 生成新父元素包裹它--> 用它的数据填充在一个模拟它的新input和list的组合-->新的组合插在它后面-->隐藏它


   /**
 * select样式封装
 * 用于重置原生的select样式
 */
define(["jquery"], function ($) {

    /**
     * select样式封装 用于重置原生的select样式
     * @param styleType:number 1
     * @param selectDoms[]要执行的select;
     */
    var selectObj=[];
    var selectCustom = function(styleType,selectDoms){

        if(selectDoms){
            selectObj.push(...selectDoms);
        }else{
            selectObj.push(...$('select'));
        }
        console.log('selectObj',selectObj,selectObj.length)

        $.each(selectObj,function(i){
            var on='', //下拉选中
                title='', //选中的文本
                newDom='', //生成新成select的外层
                domList = '', //生成新成select的列表
                currentVal = '', //选中的value
                selectId = '', // select的id唯一
                item = '', //每一个select的对象
                optionArr =''; //optionArr选项
            currentVal = this.value;
            selectId = this.id,
            item = $('#'+selectId);
            optionArr = this.options;
            for(var j=0;j<optionArr.length; j++){
                if(currentVal == optionArr[j].value){
                    on = 'on';
                    title = optionArr[j].text;
                }else{
                    on = '';
                    title = optionArr[0].text;
                }
                domList +='<li data-value="'+optionArr[j].value+'" class="'+ on +'">'+optionArr[j].text+'</li>';
            }
            if(document.getElementById("new_"+selectId)) {//判断是否已生成新的下拉元素，是的话就清除它，用于重置
                item.nextAll().remove();
                item.unwrap();
            }

            newDom = '<input class="'+styleType+' inp" type="text" id="new_'+selectId+'"  autocomplete="off" placeholder="请选择" readonly value="'+title+'">' +
                '<ul class="select-list">'+domList+'</ul>';
            item.wrap('<div class="select-reset"></div>');
            item.after(newDom);
            // item.css("opacity","0.3");
            item.css("display","none");
            changeSelect(selectId);

        });
    };
    var changeSelect = function(id){

        //显示下拉列表
        $('#new_'+id).on('click',function (e) {
            if( $('.select-reset').hasClass('on')){
                $('.select-reset').removeClass('on');
            }

            $('.select-list').hide();
            e.stopPropagation();
            $(this).next().show();
            $(this).parent().addClass('on');
        });

        //下拉列表选中
        $(document).on('click','.select-list li',function (e) {
             var self = $(this);
             var parent = $(this).parents('.select-reset');
            var selectTxt = self.text();
            parent.find('.inp').val(selectTxt);

            var selectVal = self.attr('data-value');
                parent.find('select').val(selectVal).change();
        });

        //隐藏下拉列表
        $(document).click(function(){
            $('.select-reset').removeClass('on');
            $('.select-list').hide()
        });

    };


    return {
        /**
         * 目前只支持表单里抽select
         * @param type 类型 支持多种，靠类名自己定义
         */
        setSelect: function (type,arr) {
            selectObj=[];
            var styleType = 'form-control';
            if(type == 1){
                styleType = 'form-control';
            }else if(type == 2){
                styleType = 'custom-control';
            }
            selectCustom(styleType,arr);
        },

    }
});

css 部分
styleType的就是下拉框定制了两种，可以自己定制，必竟风格越多越能满足需求
作为父级的元素cld-select，其中position:relative是必写的，为生成的列表显示的位置指个路占个坑；width跟styleType的完整保持一致

.select-reset{
    width: 100%;
    position: relative;
}
.select-reset:before{
    position: absolute;
    top: 12px;
    right: 6px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 5px solid #BFBFBF;
    content: '';
    z-index: 1;
    transform: rotate(0deg);
}
.select-reset.on:before{
    border-top: 5px solid #238efe;
    transform: rotate(180deg);
    top: 8px;
    transition: all,.2s;
}
.select-list{
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    background: #fff;
    line-height: 2;
    padding: 5px;
    border: 1px solid #BFBFBF;
    max-height: 300px;
    overflow-y: auto;
}
.select-list li {
    cursor: pointer;
    padding: 0 5px;
}