利用css新属性appearance优化select下拉框
<!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下拉框的更多相关文章
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- 带搜索框的select下拉框
利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...
- 《手把手教你》系列技巧篇(三十二)-java+ selenium自动化测试-select 下拉框(详解教程)
1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- 2.10 select下拉框
2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select 1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...
- Selenium2学习(十一)-- select下拉框
本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select 1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
随机推荐
- 7、Cocos2dx 3.0游戏开发找小三之3.0版本号的代码风格
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27691337 Cocos2d-x代码风格 前面我们已 ...
- hdu 5094 Maze(水搜索)
题目意思:说有一个人在(1,1) 他的目标点在(n,m) 每次是4方向的移动: 限制条件:有的各自之间有墙 或者门,强不可通过,有对应的要钥匙可以开启这个类型的所有门: 问题:求最少步骤数(和): 类 ...
- 网站通常使用一些javascript包裹 简化电话
//对于Web地址参数 //前面加"=="进行标识,否则直接返回 //解码时依据是否含有"=="标识来决定是否要解码 var base64EncodeChars ...
- 图表引擎AChartEngine 二
这几天项目涉及到android图表绘制,网上找的Demo都是大同小异,也就如上篇博文所写的一样是基本函数的实现.可是所有能找到的Demo都和设计图不符.木有办法,Leader发话啦,万不得已的情况下不 ...
- Python爬虫框架Scrapy获得定向打击批量招聘信息
爬虫,就是一个在网上到处或定向抓取数据的程序,当然,这样的说法不够专业,更专业的描写叙述就是.抓取特定站点网页的HTML数据.只是因为一个站点的网页非常多,而我们又不可能事先知道全部网页的URL地址, ...
- POJ1274_The Perfect Stall(二部图最大匹配)
解决报告 http://blog.csdn.net/juncoder/article/details/38136193 id=1274">题目传送门 题意: n头m个机器,求最大匹配. ...
- 使用jquery点击一个实现button或连接,进行以下div显示,在点击隐藏
jquery代码: <script type="text/javascript" src="js/jquery-1.7.2.js"></scr ...
- 高仿淘宝送货地址暴走漫画系列(附demo)
演讲: 我是个程序员,一天我坐在路边一边喝水一边苦苦检查bug. 这时一个乞丐在我边上坐下了,開始要饭,我认为可怜.就给了他1块钱. 然后接着调试程序.他可能生意不好,就无聊的看看我在干什么.然后过了 ...
- cocos2d-x box2d Demo注解
勤奋努力,持之以恒. 核心概念 Box2D 中有一些主要的对象,这里我们先做一个简要的定义,在随后的文档里会有更具体的描写叙述. 刚体(rigid body) 一块十分坚硬的物质,它上面的不论什么两点 ...
- 父类中可继承方法在处理private的一个demo
public abstract class AbstractParent { public AbstractParent() { System.out.println("Hello,pare ...