zoukankan      html  css  js  c++  java
  • css修改select默认样式

    先来看看效果图:

    css:

        <style media="screen">
            .select_demo,
            .select_list {
                width: 400px;
                height: 60px;
            }
    
            .select_demo {
                background-color: #fbe4e8;
            }
    
            .select_list {
                border: solid 2px #96cffd;
                font-size: 30px;
                padding-left: 20px;
                /*很关键:将默认的select选择框样式清除*/
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                 /*在选择框的最右侧中间显示小箭头图片*/
                background: url("chevron_down.png") no-repeat scroll right center transparent;
                background-position-x: 330px;
            }
    
            /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
            select::-ms-expand {
                display: none;
            }
        </style>

    html:

    <body>
        <div class="select_demo">
            <select class="select_list">
              <option value="0">请选择</option>
              <option value="1">香蕉</option>
              <option value="2">火龙果</option>
              <option value="3">圣女果</option>
              <option value="4">南非无籽红提</option>
              <option value="5">菲律宾帝皇蕉</option>
          </select>
        </div>
    </body>

    右侧图标:

    也可以自己在:图标  上选择自己喜欢的图标。

  • 相关阅读:
    修改注释的风格
    PHP in_array
    PHP end
    PHP each
    GitHub和SourceTree入门教程
    面试题解析(不定时更新)
    Container With Most Water
    Minimum Path Sum
    Generate Parentheses
    Unique Paths
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/7284192.html
Copyright © 2011-2022 走看看