CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了。
<div class="sel_wrap">
<label>请选择您所在的城市</label>
<select class="select" name="" id="c_city">
<option value="0">请选择您所在的城市</option>
<option value="1">中山市</option>
<option value="2">太原市</option>
<option value="3">广州市</option>
</select>
</div>
CSS样式
.sel_wrap{
height:40px;
background:#fff url(img/icons.png) no-repeat right -24px;
color: #a1a1a1;
font-size: 16px;
border:1px solid #E4E4E4;
cursor:pointer;
position:relative;
_filter:alpha(opacity=0);
}
.sel_wrap label{
padding-left:10px;
font-size:16px;
z-index:2;
color: #a1a1a1;
line-height: 40px;
height: 40px;
display: block;
}
.sel_wrap .select{
width:100%;
height:40px;
line-height:40px;
z-index:4;
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
opacity:0;
*margin-top:12px;
filter:alpha(opacity=0);
cursor:pointer;
font-size: 16px;
}
JQuery代码:
$(".sel_wrap").on("change", function() {
var o;
var opt = $(this).find('option');
opt.each(function(i) {
if (opt[i].selected == true) {
o = opt[i].innerHTML;
}
})
$(this).find('label').html(o);
}).trigger('change');
CSS select样式优化的更多相关文章
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- CSS效果:CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- css select 样式列表-----另一种样式列表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- CSS select样式列表-------美化列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Django 小实例S1 简易学生选课管理系统 8 CSS样式优化
Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...
- 通过css属性hack完成select样式美化,并兼容IE
最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- 暴力打表之hdu 2089
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 有两种方法: 1.数位DP算法 2.暴力打表——真是个好法子!!! 接下来是注意点: 1.一般这 ...
- Hive 变量和属性
Hive 中变量和属性命名空间 下面我们来用几个例子操作下: &hive SLF4J: Class path contains multiple SLF4J bindings.SLF4J: F ...
- c++11 move构造函数和move operator 函数 学习
先看个代码吧!!!!!!!!!! #include <iostream> using namespace std; class A { public: A(){cout<<&q ...
- 性能测试工具LoadRunner12-LR之Virtual User Generator 脚本编写验证步骤以及LR常见错误处理方法
验证脚本比较好的流程: Generate:录制或开发脚本 SUSI(Single User Single Iteration,单用户单循环):运行录制生成的脚本,解决可能存在的关键问题 SUMI(Si ...
- fuser解决The requested resource is busy
AIX 下出现umount busy | 处理 2011-08-17 17:22:57| 分类: AIX|字号 订阅如果一个文件系统打开了一个文件,那么必须在卸载之前将该文件关闭.例如:# umo ...
- Ajax原理实现
jQuery的ajax实现原理: // 1.创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.打开请求 xhr.open('METHO ...
- B树和B+树对比,为什么MySQL数据库索引选择使用B+树?
一 基础知识 二叉树 根节点,第一层的节点 叶子节点,没有子节点的节点. 非叶子节点,有子节点的节点,根节点也是非叶子节点. B树 B树的节点为关键字和相应的数据(索引等) B+树 B+树是B树的一个 ...
- Visual Studio 2017 安装失败,你们有这样的问题吗?怎么解决
由于发生一个或多个包故障,产品未能安装列出的工作负荷和组件. 工作负荷不完整 使用 JavaScript 的移动开发 (Microsoft.VisualStudio.Workload.WebCross ...
- StringBuilder做函数参数
StringBuilder做函数参数: static void Main(string[] args) { StringBuilder sb = new StringBuilder(); Hello( ...
- 2.C#中的常用快捷键
快速对齐代码: Ctrl+K+D: 快速对齐代码 (如果代码语法错误,就不能使用) Ctrl+Z: 撤销 Ctrl+S:保存 没事就Ctrl+S一下,防止因为电脑断电,代码全部丢失 Ctr ...