下拉选择菜单基本的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. 在MD中使用Emoji

    mark语法中支持emoji表情 具体语法是:emoji: 比如我输入 :smile: 就会出现微笑

  2. 转 python 的常用函数replace, split(),enumerate() 函数

    1.execmd = "su - " + ou + " -c 'sqlplus / as sysdba << EOF\n " + execmd3 + ...

  3. js学习笔记 -- Promise

    Promise new Promise( function(resolve, reject) {...} /* executor */  ); executor是带有 resolve 和 reject ...

  4. Tab 插件(一)

    前言 使用Jquery封装插件,使代码复用不需要每个功能重新编写代码只需修改传入参数. jQuery 插件常见到有类开发 和对象开发模式, 在下边介绍两种模式使用,初次编写,有误拍砖. jQuery ...

  5. Linux IPC 共享内存

    共享内存 共享内存(shared memory)是最简单的Linux进程间通信方式之一. 使用共享内存,不同进程可以对同一块内存进行读写. 由于所有进程对共享内存的访问就和访问自己的内存空间一样,而不 ...

  6. python 基础内置函数表及简单介绍

    内建函数名 (表达形式) 主要作用 备注 abs(x) 返回一个X值得绝对值(x=int/float/复数) all(iterable) 如果 iterable 的所有元素均为 True(或 iter ...

  7. 正则表达式获取多个img src的值

    /** * 得到网页中图片的地址 */public static Set<String> getImgStr(String htmlStr) { Set<String> pic ...

  8. [转]理解js中的原型链,prototype与__proto__的关系

    本文转自:http://rockyuse.iteye.com/blog/1426510 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script typ ...

  9. Murano Weekly Meeting 2015.08.18

    Meeting time: 2015.August.18th 1:00~2:00 Chairperson:  Nikolay Starodubtsev, from Mirantis Meeting s ...

  10. Cloudera Kudu是什么?

    不多说,直接上干货! Cloudera Kudu是什么? kudu是cloudera在2012开始秘密研发的一款介于hdfs和hbase之间的高速分布式列式存储数据库.兼具了hbase的实时性.hdf ...