精华内容
下载资源
问答
  • 原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。 select { /*Chrome和...

    原理

    原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。

    select {
      /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
      border: solid 1px #000;
    
      /*将默认的select选择框样式清除*/
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
    
      /*在选择框的最右侧中间显示小箭头图片*/
      background: url("arrow.png") no-repeat right center;
      padding-right: 14px;
    }
    
    /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
    select::-ms-expand { display: none; }

    兼容问题

     IE8/9并不支持  appearance:none  CSS属性,所以如果需要兼容低版本IE浏览器,我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见,即可覆盖即小箭头。然后再为父级容器添加背景图片或者伪元素实现自定义箭头。

    html代码:

    <div id="parentDiv">
      <select>
          <option>a</option>
          <option>b</option>
          <option>c</option>
      </select>
    </div>

    css代码:

    #parentDiv {
        background: url('ico.png') no-repeat right center;
        width: 80px;
        height: 34px;
        overflow: hidden;
    }
    #parentDiv select {
        background: transparent;
        border: none;
        padding-left: 10px;
        width: 100px;
        height: 100%;
    }

    缺陷

    下拉选项的宽度会比他的父容器宽,看上去有点不协调,就看自己的取舍问题与项目的兼容问题而定吧。

    展开全文
  • 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表样式。 文章出处:http://ourjs.com/detail/551b9b0529c8d81960000007 问题的提出 事情是这样的,您的设计师团队向您发送一个新...
    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。
    文章出处:http://ourjs.com/detail/551b9b0529c8d81960000007

    问题的提出


    事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计。




    一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的!

    Mobile 和现代浏览器的解决方案


    下面是解决方案。


    我们看到默认的下载选择框在firefox和chrome中是有些不同的

    Chrome 和 Firefox 中分别是这样的:






    其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。


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

    展开全文
  • 我们看到默认的下载选择在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分别是这样的: 其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小...
    我们看到默认的下载选择框在firefox和chrome中是有些不同的

    Chrome 和 Firefox 中分别是这样的:


    其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。


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

    展开全文
  • element select选择修改样式

    千次阅读 2020-05-14 15:07:00
    今天遇到一个需求,需要修改select 下拉菜单的需求,以前改ui框架的样式也不少了,还是轻车熟路,简单粗暴,上来就/deep/深度选择器,保存刷新,发现,并没有修改到,尴尬了,看看css,懵了,select选择器下拉框并...

    今天遇到一个需求,需要修改select 下拉菜单的需求,以前改ui框架的样式也不少了,还是轻车熟路,简单粗暴,上来就/deep/深度选择器,保存刷新,发现,并没有修改到,尴尬了,看看css,懵了,select选择器下拉框并没有在body里面,而是和script是平级关系?哈?

    在这里插入图片描述
    看看官方给出了两个属性 popper-class(Select 下拉框的类名) popper-append-to-body(是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false)

    这下就简单多了,就不要使用/deep/选择器了,因为可能会影响到同类名的元素

    // 只需要给外层的el-select设置 popper-append-to-body 和 popper-class就可以了
    // 把他当成单独的类来写
    <el-select v-model="value" :popper-append-to-body="false" popper-class="selectinfo">
         <el-option
    	     v-for="item in cities"
    	     :key="item.value"
    	     :label="item.label"
    	     :value="item.value"
         >
    	     <span>{{ item.label }}</span>
    	     <span>{{ item.value }}</span>
         </el-option>
     </el-select>
    
    // css
    .selectinfo{
         .el-scrollbar{
             .el-scrollbar__wrap{
                 .el-select-dropdown__list{
                     .el-select-dropdown__item{
                         height: 50px;
                         span{
                             display: block;
                             height: 20px;
                         }
                     }
                 }
             }
         }
     }
    

    修改以后的效果图
    在这里插入图片描述
    这是另外一个和它平级的下拉框,并没有受到影响,所以,还是少用/deep/,哈哈哈哈
    在这里插入图片描述

    展开全文
  • 去掉默认样式,设置新的样式 */ 8 .select-style { 9 position : relative ; 10 display : inline-block ; 11 } 12 .select-style select { 13 display : inline-block ; 14 ...
  • 修改select选择默认样式

    千次阅读 2019-09-03 15:00:20
    参考:http://uplifted.net/programming/change-default-select-dropdown-style-just-css/ 来源:... select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ ...
  • 最近在做一个项目,用到一个前端框架,其中一个需求是:在选中“部门”这个下拉菜单(select)之后,要求另外三个“车间”“班组”“工种”下拉菜单(select)变为不可编辑,即这三个下拉菜单的“disabled”属性值置...
  • 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表样式。 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计。 一切...
  • 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箭头样式

    2018-09-30 15:07:00
    改变select箭头样式的方法: 1,去掉箭头; 2,设置图片为背景; 3,改变图片的大小和位置替代原来的箭头 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ ...
  • 改变select的默认样式

    千次阅读 2016-09-19 09:54:59
    模拟select选择的placeholder<select> <option value="placeholder" disabled selected style="display:none">placeholder 选项一">选项一 选项二">选项二 </s
  • ion-select interface="popover "> <ion-option>Bacon</ion-option> </ion-select> <ion-select interface="action-sheet"> <ion-option>Bacon</ion-option> </ion-...
  • 改变Select三角样式

    2017-06-25 00:07:17
    改变小三角<!DOCTYPE html> <title></title> select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000;
  • 命名class为select1 <div class="select1"> <select id="sel"name="corl"> <option value="1" >红色</option> <option value="2" >紫色</option> <op...
  • 微信小程序多选选中后改变样式--自定义图片  原理:主要利用了js 的indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 wxml 多选 {{item.name}} wxss .radio-...
  • 修改select的默认样式

    千次阅读 2018-08-06 17:07:20
    在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 1 select{border: none;outline: none;} 去掉select下拉...
  • 纯Css更改Select下拉框样式,显示样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框样式,显示样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框...
  • 主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • select2 去掉边框,及样式自定义

    千次阅读 2018-08-27 22:07:20
    &lt;style&gt; .tesu_select { position:absolute; clip:rect(2px 202px 62px 2px); margin:11px; width:208px; height:30px; line-height:24px; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,830
精华内容 17,532
关键字:

select框改变样式