欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

修改下拉框的样式

程序员文章站 2022-04-22 13:41:54
...

css

.select-bg {
    display: inline-block;
    width: 85px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    border: #089164 solid 1px;
    background: #fff url(../img/select.png) no-repeat right center;
    background-size: 30px 20px;
    vertical-align: middle;
    cursor: pointer;
}
.select-green {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    position: relative;
    top: -3px;
    outline: none;
    border: 0 none;
    position: relative;
    padding: 0 0 0 5px;
    width: 85px;
    background: none;
    background-color: transparent;
    font-size: 12px;
    z-index: 99;
    overflow: hidden;
}

html

<div class="select-bg">                     
    <select class="select-green" id="selectTime">
        <option value="60">1小时</option>
        <option value="360" selected>6小时</option>
        <option value="1440">1天</option>
        <option value="4320">3天</option>
        <option value="11520">8天</option>
        <option value="21600">15天</option>
    </select>