最近在写项目时，需要修改原本自带样式，真心感到这些原生样式的顽固性。 ———题记
如上图所示为原生样式，在选择后页面回显为“选中了..项”，这样的显示非常不直观，对于用户来讲看着些许简陋，所以根据之前用过的饿了么插件的样式对当前样式进行修改。
1、修改第一步：原本样式opacity：0；接着增加一个新的div对其进行覆盖，设置div样式与select样式重合；
<body>
<div class="search_replace">请选择</div>
<select multiple="multiple">
<option>Pen</option>
<option>Apple</option>
<option>ApplePen</option>
<option>PineApple</option>
</select>
</body>.search_replace{
width: 100%;
height: 30px;
position: absolute;
background: #FFFFFF;
text-align: center;
line-height: 30px;
}
select{
opacity: 0;
}2、将选择项回显
var allSelected = [];
var selectStr = '';
var oSelect = document.querySelector('select');
var aOptionArr = oSelect.options;
oSelect.addEventListener('change', function() {
allSelected = [];
for(var i = 0; i < aOptionArr.length; i++) {
if(aOptionArr[i].selected) {
//选中所有项
allSelected.push(aOptionArr[i].innerHTML);
}
}
if(allSelected.length == 0) return;
allSelected.forEach((sel, index) => {
if(index == 0) {
selectStr = sel;
} else {
selectStr = sel + ' +' + index;
}
})
document.querySelector('.search_replace').innerHTML = selectStr;
})结果展示如下，虽然依然很丑，但是样式都是可以改的嘛，对吧：
就这样啦，继续加油哇
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
