利用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=" ...
随机推荐
- 【原创】纯OO:从设计到编码写一个FlappyBird (一)
说起来,自学计算机也有2年多的时间了,自己还没有从设计到编码,完完整整的设计一个基于面向对象的软件的经历..囧 于是,就有了这个系列.首先选用的语言是Java,没别的原因,HeadFirst设计模式是 ...
- 乐在其中设计模式(C#) - 访问者模式(Visitor Pattern)
原文:乐在其中设计模式(C#) - 访问者模式(Visitor Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 访问者模式(Visitor Pattern) 作者:webabc ...
- 在线API大全
之前整理过几个经常使用api地址,在经常使用在线API集合博文中. 近期浏览网页的时候,又发现一个很完整的api的大全,分享出来,建议大家收藏起来,用的时候方便查询. 经常使用API文档索引http: ...
- C++ - 内置类型的最大值宏定义
内置类型的最大值宏定义 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24311895 C++中, 常常会使用, 某些类型的最大值 ...
- Objective C Runtime 开发介绍
简介 Objective c 语言尽可能的把决定从编译推迟到链接到运行时.只要可能,它就会动态的处理事情.这就意味着它不仅仅需要一个编译器,也需要一个运行时系统来执行变异好的代码.运行时系统就好像是O ...
- uva--165(邮资问题,dp)
题意: 某国家发行k种不同面值的邮票,而且规定每张信封上最多仅仅能贴h张邮票. 公式n(h,k)表示用从k中面值的邮票中选择h张邮票,能够组成面额为连续的1.2.3,--n. n是能达到的最大面值之和 ...
- Chapter 1 Securing Your Server and Network(7):禁用SQL Server Browse
原文:Chapter 1 Securing Your Server and Network(7):禁用SQL Server Browse 原文出处:http://blog.csdn.net/dba_h ...
- ListView分页显示
出在:http://blog.csdn.net/tu_bingbing/article/details/13275107 当ListView要显示的数据过多时,为了更快的响应用户,这个 ...
- 2014年10本月微软MVP应用程序启动!
2014年10本月微软MVP启动应用程序! CSDN与微软合作,长期为用户提供申请"微软最有价值专家"的平台,希望有兴趣.资历的朋友以及正在朝这个方向努力的朋友可以积极參与 ...
- Swing JDialog监听回车键
在做项目时,发现在JDialog中,直接通过addKeyListener来监听回车键不起作用,无法监听到回车键,后面在网上查了些资料,终于解决了.方法如下: KeyStroke stroke = Ke ...