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. 回文串---吉哥系列故事——完美队形II

    HDU  4513 Problem Description 吉哥又想出了一个新的完美队形游戏! 假设有n个人按顺序站在他的面前,他们的身高分别是h[1], h[2] ... h[n],吉哥希望从中挑出 ...

  2. [moka学习笔记]yii2.0数据库查询的多种方法(未完待整理)

    方法一:(使用model) $modelCommunityMail = CommunityMail::find()->where(['com_id'=>$id])->all(); 方 ...

  3. js注入,黑客之路必备!

    最近刚出了新闻,阿里四名网络安全部门员工利用网页漏洞写js脚本抢月饼,于是兴致来了,想了解一下这个js脚本到底怎么写,各种刷单各种抢枪抢又是怎么实现的. 什么是javascript注入攻击? 1.每当 ...

  4. (HY000): Cannot modify @@session.sql_log_bin inside a transaction

    昨天,线上发生一例(HY000): Cannot modify @@session.sql_log_bin inside a transaction代码缺少显示的start transaction控制 ...

  5. .NET破解之百分百营销软件系列

    今天在52中看到了一个邮件批量发送工具,感觉不怎么好用,百度一下,找到了百分百系统,虽然也不怎么好用,但还是忍不住P它. 官网:http://www.100qunfa.com/ 百分百不加群提取群成员 ...

  6. AE用线来分割线面(C#2010+AE10.0… .

    希望指正. 在 ITools 类中,部分方法如下: public override void OnMouseDown(int Button, int Shift, int X, int Y) { if ...

  7. 基于MATLAB实现的云模型计算隶属度

    ”云”或者’云滴‘是云模型的基本单元,所谓云是指在其论域上的一个分布,可以用联合概率的形式(x, u)来表示 云模型用三个数据来表示其特征 期望:云滴在论域空间分布的期望,一般用符号Εx表示. 熵:不 ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 --索引目录

                  Sharepoint学习笔记—习题系列--70-573习题解析 为便于查阅,这里整理并列出了我前面播客中的关于70-573习题解析系列的所有问题,有些内容可能会在以后更新, ...

  9. 基础学习day03---程序结构与控制、函数与数组入门

    一.程序结构   1.顺序结构 2.选择结构 3.循环结构 二.顺序结构 程序至上而下逐行执行,一条语句执行完之后继续执行下一条语句,一直到程序的末尾 三.条件选择结构 选择结构是根据条件的成立与否, ...

  10. Windows下HG服务器的搭建

    1.环境和所需工具安装 1. 安装python-2.7.9.exe 2. 安装mercurial-3.2.3.win32-py2.7.exe 3. 安装mercurial-3.2.3-x86.msi ...