下拉选择菜单基本的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样式优化的更多相关文章

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

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

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

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

  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. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

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

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

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

  7. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  8. css初始化样式代码

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

  9. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

随机推荐

  1. OpenCV howto

    OpenCV中文网站 http://www.opencv.org.cn/index.php/%E9%A6%96%E9%A1%B5 Installing OpenCV on Windows 7 for ...

  2. RTT之内存管理及异常中断

    内存管理分静态内存管理和动态内存管理(根据大小又分2种) 静态内存管理:创建.删除.初始化.解绑.申请和释放.初始化内存池是属于静态内存管理,与创建内存池不同的是,此处内存池对象所使用的内存空间是由用 ...

  3. 3d Max 2014安装失败怎样卸载3dsmax?错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  4. 性能测试工具LoadRunner01-性能测试基础

    什么是性能测试? 在一定的约束条件下(指定的软件.硬件.网络环境等)对产品按一定的性能指标进行测试,确定系统能承受的最大负载压力,解决性能瓶颈.给用户最好的体验. 性能测试流程? 什么时候开始性能测试 ...

  5. 对象池2(方法功能)Pools

    对象池Pools(主要调用方法功能) namespace kernal { public class Pools : MonoBehaviour { [HideInInspector] public ...

  6. Kudu的配置(官网推荐的步骤)(Configuring Apache Kudu)

    不多说,直接上干货! http://kudu.apache.org/docs/configuration.html

  7. C# 十进制与二进制、十六进制、八进制之间的转换

    1.十进制 转 二进制 将十进制数不断地除2,将所有余数倒叙填写,即可得到所需二进制数据. public static string DecimalToBinary(int vDecimal) { / ...

  8. Jquery 客户端验证

    Jquery 客户端验证 //引入js文件 validate.js <html> <head> <title>jqueryValidateDemo</titl ...

  9. mysql存储过程中最后有commit和没有commit 是有所不同的。(为测试但是碰到过这个问题)

    如果存储过程中没有执行commit,那么spring容器一旦发生了事务回滚,存储过程执行的操作也会回滚.如果存储过程执行了commit,那么数据库自身的事务此时已提交,这时即使在spring容器中托管 ...

  10. base标签

    我们扒取到网站源码很多时候发现路径是采用相对路径,这时候我们就需要采用base标签了,用法非常简单, <base href="我们扒取网站的域名"/> 这时相对路径就相 ...