精华内容
下载资源
问答
  • jQuery下拉箭头样式

    2021-06-01 19:56:12
    可以任意修改 下拉箭头样式 可以自己放入任意图片来代替下拉箭头样式
  • 本文给大家介绍css代码去掉select的下拉箭头样式的方法,代码简单易懂,需要的朋友可以参考下
  • 自定义选择下拉列表click的来源链接 CSS arrow click的来源链接 答案 3 :(得分:-1) 首先,您需要删除select下拉列表的默认样式。做那个使用 -webkit-appearance: none; -moz-appearance: none; appearance: none; ...

    4 个答案:

    答案 0 :(得分:0)

    这个怎么样......只需将该图像设置为选择背景。

    

    

    .select-style {

    width: 268px;

    line-height: 1;

    border: 0;

    overflow: hidden;

    height: 34px;

    position:relative;

    background:#fff;

    }

    .select-style>select{

    -webkit-appearance: none;

    appearance:none;

    -moz-appearance:none;

    width:100%;

    background:none;

    background:transparent;

    border:none;

    outline:none;

    cursor:pointer;

    padding:7px 10px;

    }

    .select-style>span{

    position:absolute;

    bottom: 0;

    right: 0;

    height: 0;

    width: 0;

    cursor:pointer;

    border-right: 10px solid #ff0099;

    border-bottom: 10px solid #ff0099;

    border-left: 10px solid transparent;

    border-top: 10px solid transparent;

    }

    select::-ms-expand {

    display: none;

    }

    Select Any

    Option 1

    Option 2

    



    答案 1 :(得分:0)

    试试这个:

    HTML:

    Here is the first option

    The second option

    The third option

    CSS:

    div { margin: 20px; }

    .styled-select {

    height: 29px;

    overflow: hidden;

    width: 240px;

    }

    .styled-select select {

    background: transparent;

    border: none;

    font-size: 14px;

    height: 29px;

    padding: 5px; /* If you add too much padding here, the options won't show in IE */

    width: 268px;

    }

    .styled-select.slate {

    background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;

    height: 34px;

    width: 240px;

    }

    答案 2 :(得分:-1)

    正如其他人所提到的,你可以通过外观属性隐藏默认选择箭头并应用你自己的风格。

    为了支持较低版本的IE(我没有考虑低于9)因为外观属性即使使用ms前缀也不起作用,您可以使用以下方法获得共同支持。

    由css制作的箭头不是图像。

    

    

    $( "#sel_val" ).change(function() {

    var option = $(this).find('option:selected').val();

    $('#sel_txt').text(option);

    });

    .wrapper{width:250px;margin:10px auto;}

    .sbx{

    margin:0;

    width:100%;

    font-family:arial;

    position:relative;

    background-color:#eee;

    }

    .cus_selt:after{content:'';width:0;

    height:0;

    border-left:10px solid transparent;

    border-right:10px solid transparent;

    border-top:10px solid #FD025F;

    position:absolute;

    bottom:-1px;

    z-index:2;

    right:-6px;

    transform:rotate(-45deg);

    }

    .cus_selt{padding:20px;display:block;}

    .styled {

    float:left;

    height: 56px;

    margin: -58px 0 0;

    opacity: 0;

    width: 100%;

    filter: alpha(opacity=0);

    }

    Select a value*

    Select

    option1

    option2

    option3

    option4

    option5

    option6

    option7

    



    自定义选择下拉列表click的来源链接

    CSS arrow click的来源链接

    答案 3 :(得分:-1)

    首先,您需要删除select下拉列表的默认样式。做那个使用

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    用于IE:

    select::-ms-expand {

    display: none;

    }

    然后只需应用您想要的样式,在这种情况下使用background-image

    或者您可以使用border制作三角形并使用:before或:after等伪元素进行放置。

    select {

    background:url("http://i.stack.imgur.com/8CVVr.png") no-repeat scroll right bottom;

    background-size:contain;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    padding:5px 10px;

    }

    展开全文
  • 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>

    
    
    展开全文
  • 插件描述:可以任意修改 下拉箭头样式 可以自己放入任意图片来代替下拉箭头样式更新时间:2017/8/9 上午12:42:27更新说明:减少代码量,优化代码,是插件运行更快,更轻便使用方法在使用之前先引入css,js 文件在每...

    bc96ebbf2b3cbb5aada1b03a1d6a8b74.png

    c714816320c3c7678952c0af200e40b9.png

    插件描述:可以任意修改 下拉箭头样式 可以自己放入任意图片来代替下拉箭头样式

    更新时间:2017/8/9 上午12:42:27

    更新说明:减少代码量,优化代码,是插件运行更快,更轻便

    使用方法

    在使用之前先引入css,js  文件

    在每一个原生的 select 外围设置一个 div 包裹住(初始化之后的select宽度为div的宽度)

    第一个下拉

    第二个下拉第二个下拉第二个下拉第二个下拉

    第三个下拉

    进行初始化$(".select01").M_select();

    也可以利用 json  进行 M_select_init(selectList);M_select_init(selectList);

    // selectList 为 json对象

    插件参数$(".select01").M_select({

    "ico":"1",// ico的值可以为1-5 有五个样式的下拉箭头,如果想自己定义箭头样式,可以使用img,img2 传参

    // 手动添加下拉框箭头图片(以html页面为起始位置写路径)

    // "Img":"./js/M_select/up4.png",

    // "Img2":"./js/M_select/down1.png",

    "Title":"--下拉款的标题--",//定义为选择前的下拉框显示文档

    "radius":"10px",//定义圆角属性

    "inputName":"selected_value",//这里的inputName可以定义隐藏的input的name,通过name获取它的value的值(value的值为选中的下拉的value值,默认值为sel_v)

    "selected":"03",//选择select初始的选择状态,相当于selected,03为下拉框的value的值

    Succee:function(){

    alert("选择下拉之后的弹窗");

    }//选择选项之后的回调函数

    });

    可以给原生的select 添加 disabled=true 让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; }

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

     

     

    展开全文
  • select{ appearance:none; -moz-appearance:none;.../*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand { display: none; } 转载于:https://www.cnblogs.com/zjz666/p/11101141.html
  • 1 2 本例可以更换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;...
  • 修改select右侧的下拉箭头样式

    千次阅读 2017-07-20 13:54:11
    1. select {   /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ ... /*很关键:将默认的select选择框样式清除*/   appearance:none;   -moz-appearance:none;   -webkit-appearance:no
  • 对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉箭头样式。我思考和尝试了许多方法,最终得到一种能够兼容...
  • 废话不多说了,直接给大家贴css代码了,具体代码如下所示: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/... /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance
  • [img=https://img-bbs.csdn.net/upload/201506/18/1434602000_859142.png][/img] 请教大侠:用程序修改,不用XML 1)上面的标题文字颜色改成白色 2)下拉箭头修改成其他样式 在此先谢过!!!
  • css利用相对定位 overflow隐藏,制作向下箭头。同理可做上下左右方向箭头 /*html*/ &lt;div class="site-nav-send"&gt; 送至:北京 &lt;span&gt;&lt;b&gt;◇&lt;/b&gt;...
  • 当需求是不让用ui框架,而要手动修改一个select下拉列表的样式时… 像这样把图一改成图二: (图一): (图二): 代码如下: ... /* 清除默认的箭头样式 */ appearance: none; -moz-appearanc...
  • select { /*这个设置不支持IE*/ border: 1px solid #CCCCCC; height: 27px; width: 116px; -webkit-border-radius: 2px; -moz-appearance: none;... -webkit-appearance: none;... padding-right: 2...
  • 谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标;/* --ie清除--*/select::-ms-expand{ display: none; }/* --火狐、谷歌清除--*/select{ appearance:none...
  • select下拉框有一个下拉箭头样式,可以使用appearance与-ms-expand去掉这个样式。 代码如下: .not-arrow{ padding: 5px 10px; border:1px solid #dcd8d8; -webkit-appearance:none; -moz-appearance:none; ...
  • 下拉列表-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...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,184
精华内容 5,673
关键字:

下拉箭头样式