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>

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

    欢迎指正

  • 相关阅读:
    转C#与CSV
    转Log4Net配置
    转sp_addlinkedserver实现远程数据库链接
    HTML DOM
    JavaScript学习
    2016年的个人计划-xiangjiejie
    sass转换为css
    返回上一页显示上次操作后的界面
    angular ng-bind-html 对src路径失效 解决方案
    angular json转义html
  • 原文地址:https://www.cnblogs.com/wangduojing/p/6246170.html
Copyright © 2011-2022 走看看