精华内容
下载资源
问答
  • select下拉箭头样式改变问题

    千次阅读 2017-04-11 00:22:41
    *****关于select下拉箭头样式改变问题***** 1.在SELECT最外层套一个SPAN,加背景颜色,用 background: url("../images/select.png") no-repeat 0.55rem 0.28rem; 把小箭头位置设在SPAN靠右边; 2.把SELECT的...
    *****关于select下拉箭头样式改变问题*****
    1.在SELECT最外层套一个SPAN,加背景颜色,用 background: url("../images/select.png") no-repeat 0.55rem 0.28rem; 把小箭头位置设在SPAN靠右边;

    2.把SELECT的WIDTH设置的稍微长些,让小箭头跑远一点;

    3.在SELCT和最外层的中间再加一个SPAN,WIDTH比SELECT的WIDTH要小,设置overfloat:hidden;就可以把SELECT的下拉框隐藏掉了。



       这样一来,就剩下背景的下拉箭头图片了



    话不多说,上代码
    //css
    header .selectbox{ background: url("../images/select.png") no-repeat 0.55rem 0.28rem;margin: 0.1rem 0 0 0.18rem;background-size: 0.1rem 0.11rem}
    header select.language {
        font-size: 0.2rem!important;
           height: 0.67rem;
        width: 1.2rem;
        color: #171c61;
        display: block;
    }
    header #sleHid {
        display: block;
        width: 0.9rem;
        overflow: hidden;
    }
    
    //html
    <span class="selectbox">
    			<span id="sleHid">    
    				<select class="language" >
    				  <option value="volvo">简体</option>
    				  <option value="saab">繁体</option>
    				</select>
    			</span>
    		</span>

    
    
    展开全文
  • select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../images/xl_1.png") no-repeat scroll right center #fff; padding-right: 14px;} /*清除ie的...

    select{
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      background: url("../images/xl_1.png") no-repeat scroll right center #fff;
      padding-right: 14px;
    }

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

    转载于:https://www.cnblogs.com/zjz666/p/11101141.html

    展开全文
  • 本文给大家介绍css代码去掉select下拉箭头样式的方法,代码简单易懂,需要的朋友可以参考下
  • 清除Css中select下拉箭头样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance...
     
    

    select {
    /*Chrome
    Firefox里面的边框是不一样的,所以复写了一下*/
    border: solid 1px #000;

    /*很关键:将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png")no-repeat scroll right center transparent;


    /*
    为下拉小箭头留出一点位置,避免被文字覆盖*/
    padding-right: 14px;
    }


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

    目前做到的是这样的,背景还没想到怎么去掉

     

     

    展开全文
  • <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> select::-ms-expand { display: none; } ...
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            select::-ms-expand { display: none; }          
             .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>

     本例可以更换selet下拉箭头,只适用于非ie浏览器,ie样式为默认样式

    展开全文
  • select {/*Chrome和Firefox里面的边框是不.../*很关键:将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/background: url("...
  • css怎么去掉select下拉箭头样式

    千次阅读 2019-05-28 11:00:27
    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ ... /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none;...
  • 废话不多说了,直接给大家贴css代码了,具体代码如下所示: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/... /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance
  • 修改select右侧的下拉箭头样式

    千次阅读 2017-07-20 13:54:11
    1. select {   /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ ... /*很关键:将默认的select选择框样式清除*/   appearance:none;   -moz-appearance:none;   -webkit-appearance:no
  • 下拉列表-select样式css处理,可改变箭头的颜色2018-11-26css处理下拉列表.IN {BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: #afaeae 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #afaeae 1px solid; COLOR: #7b7b...
  • 对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉箭头样式。我思考和尝试了许多方法,最终得到一种能够兼容...
  • 移动端select实现效果图 在select标签上定位三角图片 结果导致点击三角形图片无下拉效果。 备用解决方案 :直接浏览器查看原生类名改变原生三角的颜色! ...
  • 当需求是不让用ui框架,而要手动修改一个select下拉列表的样式时… 像这样把图一改成图二: (图一): (图二): 代码如下: select { /* 鼠标移上,变小手 */ cursor: pointer; padding: 0 10px; /* 清除...
  • 4 个答案:答案 0 :(得分:0)这个怎么样..........select-style {width: 268px;line-height: 1;border: 0;overflow: hidden;height: 34px;position:relative;background:#fff;}.select-style>select{-webk...
  • select自定义箭头样式

    万次阅读 2017-08-07 14:34:23
    select自定义箭头样式?兼容性?html代码如下: 类别 <select id="worktype"> 最新流行音乐 经典金属音乐 潮流休闲音乐 </se
  • select下拉框箭头样式修改

    千次阅读 2019-06-01 17:59:42
    select下拉框箭头样式修改 下拉框箭头是不能修改的,但我们可以吧原有的箭头去掉,再用背景写一个箭头 <style> /*下拉前箭头*/ select{ /*取消默认箭头开始*/ appearance:none; -moz-appearance:none; -...
  • 修改select下拉箭头 使用背景图片

    千次阅读 2019-06-18 16:21:04
    select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background:url("../images/select_down.png") no-repeat calc... /*为下拉箭头留出一...
  • select::-ms-expand{ display... }//ie样式清除select{appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url("/uploadfiles/images/alliance/xiala@2x.png") no-repeat scroll 480px cent...
  • html select 下拉箭头隐藏 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .width5...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,535
精华内容 2,214
关键字:

select下拉箭头样式