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. 使scp不用输入密码

    使scp不用输入密码 有些时候,我们在复制/移动文件 到另一台机器时会用到scp,因为它比较安全.但如果每次都要输入密码,就比较烦了,尤其是在script里.不过,ssh有另一种用密钥对来验证的方式. ...

  2. mysql awr v1.0.2发布

    改进说明: 1.新增监控Mysql实例通过web控制台http://ip:port/hosts.html进行,无需更改mysql-jdbc.properties配置文件和spring-servlet. ...

  3. Play 内置模板标签(1.2.3版本)http://www.anool.net/?p=617

    a标签: 用来插入一个连接到控制器方法的html link.如下: #{a @Application.logout()}Disconnect#{/a}模板内容被解析后变成: <a href=&q ...

  4. 如何解决cellIndex在IE下兼容性问题

    在不久前的项目中,涉及到一个表格数据展示在IE下出现兼容性问题.经过一段时间的排查,居然是一个cellIndex属性导致的. cellIndex表示返回一行的单元格集合中单元格的位置索引. 例子: & ...

  5. 转:在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

    转:http://www.cnblogs.com/mofish/archive/2012/06/08/2541604.html 不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏 ...

  6. iOS 视频播放 - YVideoPlayer - UIView

    这是一个使用简便的视频播放框架,它基于UIView,它可以是一个小窗口,也可以是一个全屏的窗口 简单的方式加载Video框架: 一行代码加载! 一行代码更新! 下载链接 : https://githu ...

  7. 【转】一个非常常见但容易被忽略的c++问题——用IPML模式可以解决

    pimpl (the pointer-to-implementation idiom)手法在 C++ 里已是“高手”们广泛运用的成熟方法之一,它的优点很多,诸如降低编译依赖.提高重编译速度之类的工具性 ...

  8. 调研Android平台的开发环境的发展演变

    ·  安卓是以linux为基础的开放源码操作系统.因为安卓的开源等原因,所以现在市场上会有大量的APP可供使用,且各个方面都功能强大. ·  也许是因为开源的原因,安卓过于碎片化.每个APP互相独立. ...

  9. Node.js之Promise维护(同步)多个回调(异步)状态

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉..NET程序员初用node.js最需要适应的就是异步开发, 全是异步,常规逻辑下遍历列表都是异步,如何保证 ...

  10. JavaScript Patterns 3.1 Object Literal

    Basic concept Values can be properties: primitives or other objects methods: functions User-defined ...