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

    <style type="text/css">
    .select_demo,.select_list {
       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("../../image/yongqingpolice/arrow.png") no-repeat scroll right center transparent;
      background-position-x: 330px;
    }

    /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
    select::-ms-expand {
      display: none;
    }
    </style>

    <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>

    效果图:

  • 相关阅读:
    第11章 规模化微服务
    第10章 康威定律和系统设计
    9.3静态数据的安全
    第9章 安全
    第八章 监控
    7.8拯救消费者驱动的测试
    第7章 测试
    使用Spring + Jedis集成Redis
    activiti工作流数据库表详细介绍 (23张表)
    Redis是什么?Redis数据库全解?
  • 原文地址:https://www.cnblogs.com/lyt598/p/11064064.html
Copyright © 2011-2022 走看看