CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的:

html结构如下:

<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:; color: #a1a1a1; line-height: 40px; height: 40px; display: block;}
.sel_wrap .select{width:100%; height:40px; line-height:40px; z-index:;position:absolute;top:;left:;margin:;padding:;opacity:; *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);
});

这儿只是提供一种方法而已,当然前面文章中已经写过用css3模拟select样式效果更好。

CSS select样式优化 含jquery代码的更多相关文章

  1. CSS效果:CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  2. CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...

  3. css select 样式列表-----另一种样式列表

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  4. CSS select样式列表-------美化列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  6. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

    Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...

  7. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  8. 通过css属性hack完成select样式美化,并兼容IE

    最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...

  9. HTML 学习笔记 JQuery(锋利的JQuery 代码)

    一 制作简单的导航栏 <html> <head> <meta charset="UTF-8"> <title></title& ...

随机推荐

  1. oracle client ORA-12541: TNS: 无监听程序

    1. Question description: if you are setting the oracle client to add a local network service,  you m ...

  2. CentOS修改服务器系统时间

    linux安装完毕后,一般都是国外的世界,一点都不方便设置任务,或者导致网站获取本地的时间错乱,所以就需要把服务器的时间改为和本地时间一致,也就是换成中国的时间. 第一条指令:date –s '201 ...

  3. 【Effective Java】2、构造参数过多的时候

    package cn.xf.cp.ch02.item2; /** * * 功能:当我们的构造参数有很多,超出可控范围的时候,用build模式 时间:下午8:25:05 文件:NutritionFact ...

  4. Hibernate之lazy延迟加载(转)

    一.延迟加载的概念 当Hibernate从数据库中加载某个对象时,不加载关联的对象,而只是生成了代理对象,获取使用session中的load的方法(在没有改变lazy属性为false的情况下)获取到的 ...

  5. ahjesus 创建msdn一样的帮助文档

    转载自http://www.cnblogs.com/DotNetNuke/archive/2009/04/23/1441899.html 使用SandCastle创建.Net帮助文档 Sandcast ...

  6. Linux下安装配置Nexus

    一.安装和运行nexus 1.下载nexus:http://www.sonatype.org/nexus/go 可选择tgz和zip格式,以及war,选择tgz或zip时不同版本可能在启动时存在一定问 ...

  7. 什么是CSR证书申请文件?

      CSR是Cerificate Signing Request的英文缩写,即证书请求文件,在多方之间在互联网上安全分享数据的公钥基础架构PKI系统中,CSR文件必须在申请和购买SSL证书之前创建.也 ...

  8. Jaxb解析xml准换为javabean

    先说下这个的背景吧,前些日子,有个以前的小同事说刚接触webservice,想解析下xml,记得我学的时候还是dom4j,sax的解析方式,最近看别人的代码用的jaxb的方式,觉得注解起来很简练,所以 ...

  9. [TypeScript] JSON对象转TypeScript对象范例

    [TypeScript] JSON对象转TypeScript对象范例 Playground http://tinyurl.com/nv4x9ak Samples class DataTable { p ...

  10. datepicker冲突

    公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题. 最近就遇到了一个比较坑的问题.datepicker 有两个插件库中的datepicker插件比较有名.一个是jQuer ...