原生js实现select效果

前言
在使用select时候原生默认样式很难修改特别是option的样式和鼠标经过option时候的样式改变很难覆盖，能力不足尚未实现，暂且记录后续解决，现自己写一个选择的效果

DOM

<div class="selectBox">
		<div class="select"><span class="selectText">商机</span><img src="down.png" alt=""></div>
		<ul class="selectOption">
			<li class="selectOption1">商机</li>
			<li class="selectOption2">采购商</li>
		</ul>
	</div>

css

.selectBox{
			width: 90px;
		}
		.select{
			width: 90px;
			background-color: #17a6b5;
			height: 40px;
/*			position: relative;
			text-align: center;
			line-height: 40px;*/
			cursor: pointer;
			display: flex;
			justify-content:center;
			align-items:center;
			border-radius: 3px;
		}
		.select img{
			width: 20px;
/*			position: absolute;
			top: 10px;*/
			cursor: pointer;
		}
		.selectOption{
			background-color: #666666;
			width: 80px;
			list-style: none;
			padding-left: 0;
			margin-top: 0;
			display: none;
		}
		.selectOption li{
			width: 100%;
			color: #ffffff;
			text-align: center;
			cursor: pointer;
		}
		.selectOption li:hover{
			background-color: #17a6b5
		}

JS

var selectBox = document.getElementsByClassName('selectBox')[0];
		var Select = document.getElementsByClassName('select')[0];
		var selectText = document.getElementsByClassName('selectText')[0];
		var option = document.getElementsByClassName('selectOption')[0];
		var option1 = document.getElementsByClassName('selectOption1')[0];
		var option2 = document.getElementsByClassName('selectOption2')[0];
		// 点击select
		Select.onclick = function(){
			option.style.display = 'block'
		}
		// 鼠标移除
		selectBox.onmouseleave = function(){
			option.style.display = 'none'
		}
		option1.onclick = function(){
			option.style.display = 'none'
			selectText.innerHTML = '商机'
		}
		option2.onclick = function(){
			option.style.display = 'none'
			selectText.innerHTML = '采购商'
		}

效果如下
样式丑陋有待修改