<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>利用css新属性appearance优化select下拉框</title>

 <style type="text/css">

 body{ padding:100px;}

 select{ border:1px solid #ccc;

         padding-right:30px;

         appearance:none;

         -moz-appearance:none; /* Firefox */

         -webkit-appearance:none; /* Safari and Chrome */

         background:url(images/ico.png) no-repeat right center;

         }

 select::-ms-expand {

   display: none;

 }

 </style>

 </head>

 <body>

 <select>

 <option value="ec3bd039-f3a5-e411-8154-5404a6f3ab2f">所有分类</option>

 <option value="bbf39f6f-f4a5-e411-8154-5404a6f3ab2f">食品</option>

 </select>

 </body>

 </html>






收到网上一篇文章的启发：http://www.cnblogs.com/PeunZhang/p/3522603.html


 


												


											
利用css新属性appearance优化select下拉框的更多相关文章
	

    
								
  1. css配合js模拟的select下拉框
		
    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
    
		
    2. 
						
  2. 点击select下拉框获取option的属性值
		
    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
    
		
    3. 
						
  3. 带搜索框的select下拉框
		
    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...
    
		
    4. 
						
  4. 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）
		
    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...
    
		
    5. 
						
  5. 自定义样式的select下拉框深入探索
		
    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
    
		
    6. 
						
  6. HTML中的select下拉框内容显示不全的解决办法
		
    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
    
		
    7. 
						
  7. 2.10 select下拉框
		
    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...
    
		
    8. 
						
  8. Selenium2学习（十一）-- select下拉框
		
    本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...
    
		
    9. 
						
  9. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）
		
    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Tuxedo学习门户网站
			
    中间件简介: 介于客户机和server之间的夹层,突破了传统的c/s架构,为构建大规模,高性能.分布式c/s应用程序提供了通信.事物,安全.容错等基础服务,屏蔽了底层应用细节,应用程序不必从底层开发, ...
    
			
    2. 
						
  2. OpenGL之路（八）加入�光照效果和键盘控制
			
    在opengl中加入�光照的效果,可用键盘控制放大缩小 w键放大 s键缩小 d键开关灯 预览效果例如以下: 源代码例如以下: #include <gl/glut.h> #include & ...
    
			
    3. 
						
  3. Appium0.18.x迁移到Appium1.x须知事项（灰常实用，解答了本人几个疑问）
			
    英文原版:https://github.com/appium/appium/blob/master/docs/en/advanced-concepts/migrating-to-1-0.md Migr ...
    
			
    4. 
						
  4. 【007】【JVM——内存分配和恢复策略】
			
     内存分配与收回策略 JVM的自己主动内存管理要自己主动化地解决两个问题:对象分配内存以及回收分配给对象的内存.回收内存前几篇已经讲了.如今说内存分配.对象的内存分配一般分配在堆内存中,也可能经过 ...
    
			
    5. 
						
  5. XCL-Charts绘画面积图(AreaChart) 例1
			
    样本区域地图,发现区域图的时候把做向上注视位置图更具优势的管理.在改变. 区域图网格和轴是不一样的处理与其它图, 它是用来表示其影响范围的覆盖范围,车桥无段伸出. 在这里下处理. watermark/ ...
    
			
    6. 
						
  6. ios至于理解锚
			
    锚点ios出现在少数地方,多数用在动画. 今天看了一部电影,以上所有关于锚,两年前锚这个概念看cocos2d当被接触的基本概念,当时我没怎么看,今天看了,刚刚好学习. 阅读blog,它是关于锚,像:  ...
    
			
    7. 
						
  7. PHP获取表单方法
			
    php接收HTML当表单提交的信息,数据将存储提交在全局阵列中,我们能够调用系统特定的自己主动全局变量数组来获取这些值.经常使用的自己主动全局变量例如以下所看到的: $_GET $_POST $_RE ...
    
			
    8. 
						
  8. A == B ?（杭州电2054）
			
    A == B ? Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...
    
			
    9. 
						
  9. ueditor使用注意事项
			
    1.js问题的介绍 第一ueditor型材 <script type="text/javascript" src="ueditor1_4_3-utf8-jsp/ue ...
    
			
    10. 
						
  10. POJ 3207 Ikki&#39;s Story IV - Panda&#39;s Trick (2-SAT)
			
    职务地址:id=3207">POJ 3207 找好矛盾关系.矛盾关系是(2,5)和(3,6)这两个仅仅能一个在外边,一个在里边.利用这个矛盾关系来建图. 能够用在外边和里边来当1和0, ...
    
			
    11.