zoukankan      html  css  js  c++  java
  • 下拉列表旁指下箭头及字体颜色等样式修改(2)

    前阵子用的那个取巧的显示方法,因不是很好看,试图利用bootstrap等第三方插件去做UI设计的效果,失败,因无法自定义select的背景色(bootstrap若自定义select的背景色,但是会显示好丑的那种下拉大指示标,css代码冲突,或许有解决方法,但目前没找到,问题记录在这儿,后续待解决)。

    现记录第二种解决方法:

    直接隐藏select默认的指向小三角形

    利用

    appearance:none;

    -moz-appearance:none;/*兼容火狐浏览器*/

    -webkit-appearance:none;/*兼容Chrome浏览器*/

    随后,对select标签,设置背景图片,背景图片右侧绘制一个向下的小三角形  ==

    <select class="selectLanguage">

    .......

    </select>

    .selectLanguage{

        background:url("此处为图片引用路径") no-repeat scroll center transparent;

    }

    若出现三角形被select的字体盖住的问题,则:

    在进行如下添加

    .selectLanguage{

        padding-right:20px;

    }

    此处像素大小,根据实际情况进行调整。

  • 相关阅读:
    C#深复制和浅复制
    C#程序设计六大原则记录
    C#异步
    线程同步
    线程基础
    委托,事件
    XmlSerializer
    C#接口
    C#封装
    C#多态
  • 原文地址:https://www.cnblogs.com/fhychzu/p/5345095.html
Copyright © 2011-2022 走看看