css select 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>select</title>
        <style>
            .h_select{
                /*用div的样式代替select的样式*/
                width: 200px;
                height: 40px;
                border-radius: 5px;
                /*//盒子阴影修饰作用,自己随意*/
                position: relative;
                border: solid 1px #ccc;
                overflow: hidden;
            }
            .h_select:focus{
                box-shadow: 0 0 5px #ccc;
            }
            .h_select option{
                display: block;
                text-align:center;
            }
            .h_select select{
                /*//清除select的边框样式*/
                border: none;
                /*//清除select聚焦时候的边框颜色*/
                outline: none;
                /*//将select的宽高等于div的宽高*/
                width: 100%;
                /*height: 40px;*/
                height: 100%;
                line-height: 100%;
                /*//隐藏select的下拉图标*/
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                /*//通过padding-left的值让文字居中*/
                /*padding-left: 50%;*/
                text-align: center;
                text-align-last: center;                
            }
            /*//使用伪类给select添加自己想用的图标*/
            .h_select:after{
                content: "";
                width: 14px;
                height: 8px;
                background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
                /*//通过定位将图标放在合适的位置*/
                position: absolute;
                right: 10px;
                top: 45%;
                /*//给自定义的图标实现点击下来功能*/
                pointer-events: none;
            }
        </style>
    </head>
    <body>
    <div class="h_select" tabindex = "0">
        <select name="" >
            <option value="芝士">芝士</option>
            <option value="奶油">奶油</option>
        </select>
    </div>
    </body>
</html>

 

posted @ 2018-09-27 16:57  Charles王志会  阅读(329)  评论(0)    收藏  举报