<!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. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  3. 带搜索框的select下拉框

    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...

  4. 《手把手教你》系列技巧篇(三十二)-java+ selenium自动化测试-select 下拉框(详解教程)

    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...

  5. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  6. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  7. 2.10 select下拉框

    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...

  8. Selenium2学习(十一)-- select下拉框

    本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...

  9. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

随机推荐

  1. 两个堆叠fragment,上层fragment响应于降低fragment的button点击事件补救措施

    加入onViewCreated的Touch事件监听, 以解决叠在一起的fragment上层响应下层的button点击事件解决方法 @Override public void onViewCreated ...

  2. POJ - 3249 Test for Job (DAG+topsort)

    Description Mr.Dog was fired by his company. In order to support his family, he must find a new job ...

  3. skyeye安装+arm-elf-gdb安装+模拟s3c44b0x+执行ucos4skyeye

    [假设你要引用.请阅读所有,这里是我的为期两天的过程只是一个记录] skyeye安装:ubuntu12.0432 llvm2.8 skyeye1.3.3 http://blog.chinaunix.n ...

  4. unity调用安卓打包apk时的错误unable to convert classes into dex format

    出现这种问题一般是由于有重复的文件所致,看下unity报的错误那些文件重复了,把重复的文件删了即可 例如,将eclipse中的安卓工程bin\class导出jar包时,会将下面的.class文件打包, ...

  5. 在线API大全

    之前整理过几个经常使用api地址,在经常使用在线API集合博文中. 近期浏览网页的时候,又发现一个很完整的api的大全,分享出来,建议大家收藏起来,用的时候方便查询. 经常使用API文档索引http: ...

  6. MVC5+EF6 入门完整教程 总目录

    本系列文章会从一个主干开始,逐渐深入,初步规划30篇.初级10篇,中级10篇,综合项目实战10篇 初级10篇 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@201505 ...

  7. Hadoop处理HDF文件

    1.前言 HDF文件是遥感应用中一种常见的数据格式,因为其高度结构化的特点,笔者曾被怎样使用Hadoop处理HDF文件这个问题困扰过相当长的一段时间.于是Google各种解决方式,但都没有找到一种理想 ...

  8. Java设计模式(三)-修饰模式

    我们都知道.能够使用两种方式给一个类或者对象加入行为. 一是使用继承.继承是给一个类加入行为的比較有效的途径.通过使用继承,能够使得子类在拥有自身方法的同一时候,还能够拥有父类的方法.可是使用继承是静 ...

  9. 3D数学--学习笔记(五岁以下儿童):总结一些概念(避免遗忘!)

    下面是一些概念只是一个简单的解释,这里是它的一个简单的了解! 当人们谈论,我能理解有关. 1.正交投影: 投影.这意味着降维操作. 全部的点都被拉平至垂直的轴(2D)或平面(3D)上.这样的类型的投影 ...

  10. Swift开发学习(两):Playground

    Swift开发学习:Playground 大约 对于软件用户.游戏玩家,我一直提倡用户体验.也是用户,是各种开发工具的使用者.也会喜欢用户体验做得好的工具软件.这次苹果想开发人员所想,提供了一个能够玩 ...