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
  • 相关阅读:
    移动端web
    递归求和
    json的基础了解
    冒泡排序的编程方法
    js面向对象
    1002,javascript的原型属性
    1001,instanceof关键字以及typeof关键字
    19,简述一下src与href的区别(不懂)
    531,<form>action属性
    530,css outline属性
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6073433.html
Copyright © 2011-2022 走看看