Select下拉选择框的美化

阅读更多

Select下拉选择框的美化

1.1 CSS修改select下拉框的默认样式
1、原理
        将浏览器默认的下拉框样式清除，然后自定义样式，再附一张小箭头图片或者使用三角的实体字符即可。
2、用法

select {
  /*将默认的select选择框样式清除，IE8/9并不支持  appearance:none  CSS属性*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display: none;}

注意：上述方式不能兼容IE9及以下版本。
3、兼容低版本IE浏览器
        为select添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见（overflow: hidden；），即可覆盖小箭头。
        此方法的缺陷是并不能隐藏下拉框的显示，下拉选项的宽度会比他的父容器宽，看上去有点不协调。
4、实例

  
  
  


  
    去掉select原有样式
    Washington DC
    Los Angeles
    Chicago
    Houston
    Philadelphia
    Phoenix
  
  


  
    
      定义新样式
      food beverage
      restaurant
      shopping
      taxi limo
      theatre
      museum
      computers
    
  
  


  
    
      定义新样式
      food beverage
      restaurant
      shopping
      taxi limo
      theatre
      museum
      computers
    
  

1.2利用js自定义select显示部分，覆盖select原有显示部分。
1、实例

	
	
	



	使用现金券
	
		10元现金券
		20元现金券
		30元现金券
		40元现金券
	

1.3利用js完全自定义select下拉选择
1、实例

    
	
	



	


    
请选择分类
    
水果类
    
蔬菜类
    
瓜果类
    
干货类
    
生鲜类
    
饮品类