zoukankan      html  css  js  c++  java
  • 自己修改select的样式(修改select右边的小三角)

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

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. select {  
    2.   /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/  
    3.   border: solid 1px #000;  
    4.   
    5.   /*很关键:将默认的select选择框样式清除*/  
    6.   appearance:none;  
    7.   -moz-appearance:none;  
    8.   -webkit-appearance:none;  
    9.   
    10.   /*在选择框的最右侧中间显示小箭头图片*/  
    11.   background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;  
    12.   
    13.   
    14.   /*为下拉小箭头留出一点位置,避免被文字覆盖*/  
    15.   padding-right: 14px;  
    16. }  
    17.   
    18.   
    19. /*清除ie的默认选择框样式清除,隐藏下拉箭头*/  
    20. select::-ms-expand { display: none; }  

    参考链接:
    http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/

    全部教程http://each.sinaapp.com/angular/index.html
  • 相关阅读:
    QPushbutton样式
    qt调动DLL
    QLabel设置行间距
    Qt 5.2.1 applications (32 bit) in CentOS (64 bit with gcc 4.8.2)
    qt设置阴影效果
    ubuntu命令
    How to configure NFS on Linux
    gsoap生成onvif c++源码
    QUrl乱码问题
    QTableWidget自适应标题(铺满、可调节)
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6073433.html
Copyright © 2011-2022 走看看