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. php中的抛出异常和捕捉特定类型的异常

    测试环境:PHP5.5.36  Safari 9.1.2   异常捕获,在现在很多ide工具里都可以用快捷键很方便的添加上,防止用户看到自己看不懂的报错甚至莫名其妙崩溃,导致用户体验不好. 哪怕显示一 ...

  2. php正规则表达式学习笔记(几个常用函数的区别)

    preg_mache()函数和 preg_mache_all()函数的区别: preg_mache()只会匹配规则中的字符一次, preg_mache_all()会匹配符合条件的所有字符! 例子对比: ...

  3. mysql init-file参数中语句限制

    mysql 启动选项中的init-file文件的内容目测只能是dml语句,不能包含ddl,否则执行就会报错,但不影响启动本身..太扯了..

  4. Erlang进程间消息接收超时设定

        Erlang消息接收函数,一般都会设计成尾递归调用自己的模式.但是这样的模式,如果没有消息则会无限的等待下去,所以为了不无限等待,这里可以加个超时设定,例如: flush() -> re ...

  5. HTML5离线缓存Manifest

    web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

  6. python基础之常用模块以及格式化输出

    模块简介 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要 ...

  7. javascript数组浅谈2

    上次说了数组元素的增删,的这次说说数组的一些操作方法 join()方法: ,,] arr.join("_") //1_2_3 join方法会返回一个由数组中每个值的字符串形式拼接而 ...

  8. abap 选择屏幕事件AT SELECTION-SCREEN

    AT SELECTION-SCREEN (1).其实就像一个FORM,所以在这个事件里声明的变量都是局部变量. (2).根据SY-UCOMM这个系统变量可以判断用户的命令 (3).在这个事件里响应的是 ...

  9. ABAP--如何在ALV_Grid的函数中定义下拉列表

    最近经常听到网友和用户需求希望你在ALV Grid的函数中加入下来列表,其实SAP已经考虑了大家的需求,用户的需求是可以实现的.我特地将代码奉献给大家,供大家参考和学习. 代码如下: REPORT.* ...

  10. How to Use Telnet to Test SMTP Communication

    Topic Last Modified: 2005-05-24 Telnet is an extremely useful tool for troubleshooting issues relate ...