zoukankan      html  css  js  c++  java
  • 去除select的样式

      收藏别人的好方法,自己暂时遇到的只要需要select写的,select下拉箭头都不是select固有箭头,需要给select添加制定的下拉背景,

    也试过其他(select写的长,外包div,overflow:hidden;一下),但是下面这种最好用.

    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            select::-ms-expand { display: none; }   /*此行兼容ie,隐藏select样式*/                
             .info-select{
                width: 88px;
                height: 25px;
                border: none;
                outline: none;
                /*将默认的select选择框样式清除*/
                appearance:none;
                -moz-appearance:none;
                -webkit-appearance:none;
                -ms-appearance:none;
               /*在选择框的最右侧中间显示小箭头图片*/
               background: url(img/sele.png) no-repeat scroll right center transparent;     /***将sele.png图片替换为你的下拉箭头**/      
             }
            </style>
        </head>
        <body>
            <select class="info-select">
                <option selected="selected">1</option>
                <option>2</option>
            </select>
        </body>
    </html>

    效果如下:(自己在编辑器试的没问题,并且都兼容)

    欢迎指正

  • 相关阅读:
    大话设计模式——UML图
    IdentityServer3零星笔记
    Angular路由
    基于jquery的静态页面翻页
    00_python安装与配置(mac)
    OracleParameter.UdtTypeName的值必须是全大写!
    VS2012调用64位IIS Express
    MVC中使用Ueditor
    优秀博客站点
    jqGrid中的formatter
  • 原文地址:https://www.cnblogs.com/wangduojing/p/6246170.html
Copyright © 2011-2022 走看看