怎样单纯用CSS重写select标签的样式？主要是下拉菜单的长宽和选择时的颜色

Question

怎样单纯用CSS重写select标签的样式？主要是下拉菜单的长宽和选择时的颜色，不想拜托JS（PS：JS我还不怎么会。。）

<div class="onlesson">
    <select>
        <option>按课程名称</option>
        <option>按课程类别</option>
        <option>按主讲师</option>
    </select>
</div>

.onlesson{display: inline-block;width: 153px;height: 82px;line-height: 78px;margin-left: 20px;margin-right: 15px;}
.onlesson select{
    -webkit-appearance:none; 
    width: 153px;
    height: 42px;
    border: 1px solid #3D9DF0;
    font-size: 14px;
    color: #858585;
    padding-left: 21px;
    background: url("../img/down.png" ) no-repeat 90% center;
    font-family: "宋体";
}

Answer 1

这个需要事件驱动，js实现也很简单的