1. 程式人生 > >select樣式自定義

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的樣式
        }
    }
}