select样式自定义

.search{
    width: 25%;//定义最外层div的宽度
    height:6rem;
    position: relative;
    background-image: url(/static/images/job/input.png);//设置div的背景图片
    background-repeat:no-repeat; 
    background-size:100% 100%;//填充满整个div
    position: relative;
    input{
        width: 92%;
        height: 4.5rem;
        position: absolute;//input框定位到背景图片上
        top:0.7rem;
        left:0.5rem;
        border: 0px;
        outline:none;
        font-size:2rem;
      }
}
.area{
    width: 25%;
    height:6rem;
    position: relative;
    background-image: url(/static/images/job/input.png);
    background-repeat:no-repeat; 
    background-size:100% 100%;
    position: relative;
    select{
        width: 92%;
        height: 4.5rem;
        position: absolute;//select框定位背景图片上
        top:0.7rem;
        left:0.5rem;
        border: 0px;
        outline:none;//去除点击的边框效果
        font-size:2rem;
        appearance:none;//去除向下箭头
        background: url(/static/images/job/right.png) no-repeat scroll right center transparent;//自定义向下箭头
        option { //option的样式
        } 
        option:hover{//鼠标悬浮option的样式
        }
    }
}

猜你喜欢

转载自blog.csdn.net/Mh_ui/article/details/79557738