select 美化 - 上下箭头

<div class="select-main">
<div class="select-arrow"></div>
<div class="select-set">大专</div>
<div class="select-block" style="display: none;">
<ul class="select-list">
<li class="select-items active">大专</li>
<li class="select-items">本科</li>
</ul>
</div>
</div>

 

 

下箭头：

border-top: 7px solid #2DB2FF;
border-left: 7px solid transparent;
border-right: 7px solid transparent;

 

上箭头：

border-bottom: 7px solid #2DB2FF;
border-left: 7px solid transparent;
border-right: 7px solid transparent;

 

效果图：

 

div.select-arrow-xia {
    border-top: 7px solid #000000;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    cursor: pointer;
    height: 0px;
    position: absolute;
    top: 18px;
    right: 10px;
    width: 0px;
    z-index: 7;
}
div.select-arrow-shang {
    border-bottom: 7px solid #000000;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    cursor: pointer;
    height: 0px;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 0px;
    z-index: 7;
}