CSS select样式优化 含jquery代码
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代码的更多相关文章
- CSS效果:CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...
- css select 样式列表-----另一种样式列表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- CSS select样式列表-------美化列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
- Django 小实例S1 简易学生选课管理系统 8 CSS样式优化
Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- 通过css属性hack完成select样式美化,并兼容IE
最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...
- HTML 学习笔记 JQuery(锋利的JQuery 代码)
一 制作简单的导航栏 <html> <head> <meta charset="UTF-8"> <title></title& ...
随机推荐
- AC自动机基础知识讲解
AC自动机 转载自:小白 还可参考:飘过的小牛 1.KMP算法: a. 传统字符串的匹配和KMP: 对于字符串S = ”abcabcabdabba”,T = ”abcabd”,如果用T去匹配S下划线部 ...
- Spring核心概念之AOP
一.AOP 的概念 AOP(Aspect Oriented Programming)的缩写,面向切面编程,主要作用就是对代码进行增强处理. 理解面向切面编程的含义:就是在不改变原有程序的基础上为代码增 ...
- 前端技巧:禁止浏览器static files缓存篇(转)
前端技巧:禁止浏览器static files缓存篇 由于CSS/JS文件经常需要改动,前端调试时是不希望浏览器缓存这些文件的. 本文记录博主的经验. Meta法 目前在chrome调试还没有遇到问题, ...
- MessageFormat格式化的一些问题
如果格式化字符串中包含单引号,处理方法是用2个单引号进行转义,如果是数字,则需要加上格式: MessageFormat.format("(''{0}'',''{1}'',{2,number, ...
- 对getElementsByTagName("*")获取全部元素的总结
var all=document.getElementsByTagName("*") //获取整个页面的标签元素 alert(all.length); ...
- swift学习笔记之-自动引用计数
//自动引用计数 import UIKit /*自动引用计数(Automatic Reference Counting) 防止循环强引用 Swift 使用自动引用计数(ARC)机制来跟踪和管理你的应用 ...
- AloneJs.albumBox() —— 相册对话框
一.引用 <link href="https://cdn.suziyun.com/alonejs.min.css" rel="stylesheet" /& ...
- lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- 【原/转】UITableview性能优化总结
UITableView作为ios中使用最频繁的控件之一,其性能优化也是常常要面对的,尤其是当数据量偏大并且设备性能不足时.本文旨在总结tableview的几个性能优化tips,并且随着认识的深入,本文 ...
- 我的android学习经历12
自动匹配输入的内容(文章最后有一个问题有兴趣的可以解答一下,谢谢大神了) 这个主要是两个控件MultiAutoCompleteTextView和AutoCompleteTextView 这两个控件和T ...