美文网首页
自定义下拉框样式

自定义下拉框样式

作者: Hsugar | 来源:发表于2020-02-24 18:20 被阅读0次
    select {
      /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
      border: solid 1px #000;
     
      /*很关键:将默认的select选择框样式清除*/
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      /*在选择框的最右侧中间显示小箭头图片*/
      /* background: url("//cdn.lexue.com/brandsite_v2/img/select_arrow.png") no-repeat scroll right center transparent; */
      /*为下拉小箭头留出一点位置,避免被文字覆盖*/
      padding-right: 14px;
    }
     
    .icon-down{
      display: inline-block;
      width:30px;
      height:16px;
      background: url("//cdn.lexue.com/brandsite_v2/img/select_arrow.png") no-repeat scroll right center transparent;
      /* background: url("../image/newWap/wapIcons.png") -168px -96px no-repeat; */
    }
    /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
    select::-ms-expand { display: none; }
    
    • input-placeholder 颜色
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #60C7DC;
      font-size: 15px;
    }
    

    相关文章

      网友评论

          本文标题:自定义下拉框样式

          本文链接:https://www.haomeiwen.com/subject/xsxcoqtx.html