美化select下拉框

在写示例的时候，用到了下拉框，但是原生的下拉框是在是有点难看，然后模仿着写了点，一个是直接在写好的Dom上进行美化，一个是用js生成，然后定义类名及相应的事件来处理

1.效果图

2.直接是在Dom上美化

• html文件

<div class="root">
    <div id="selectedItem">
        <div id="promptText"><span id="spanText">请选择你喜欢的文字</span><img src="../images/arrowup.png" id="arrows" /></div>
        <ul class="choiceDescription">
            <li class="item">万水千山，陪你一起看</li>
            <li class="item">万水千山，陪你一起看1</li>
            <li class="item">万水千山，陪你一起看2</li>
            <li class="item">万水千山，陪你一起看3</li>
            <li class="item">万水千山，陪你一起看4</li>
        </ul>
    </div>
</div>

• css文件

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 下拉框包含层 */
#selectedItem{
    width: 240px;
    cursor: pointer;
}
/* 已选中的选项 */
#promptText{
    position: relative;
    padding-left: 10px;
    width: 230px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #fff;
    color: #999;
    font-size: 14px;
}
/* 图标 */
#arrows{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
#arrows:focus{
    outline: none;
}
/* 下拉可选项包含层 */
.choiceDescription{
    position: absolute;
    display: none;
    /*overflow: hidden;*/
    margin-top: 2px;
    width: 240px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    background: #fff;
}
.show{
    display: block;
}
/* 下拉可选项 */
.item{
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    font-size: 15px;
    color: #666;
}
.item:hover{
    color: #fff;
    background: rgba(49, 255, 195, 0.67);
}

• js文件

(function() {
    let choiceDescription = document.getElementsByClassName('choiceDescription')[0];
    let arrows = document.getElementById('arrows');
    /* 用于判断是否是下拉 */
    let isDown = false;

    let selectedItem = document.getElementById('selectedItem');
    /* 对点击下拉进行监听 */
    selectedItem.addEventListener('click', function() {
        isDown = !isDown;