[k]自定义样式下拉菜单
自定义样式下拉菜单-1
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 自定义样式下拉菜单1 </title> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <style> body{background:lavender;margin:30px;} .f_group{position:relative;font-size:16px;} .f_group .f_select{width:300px;height:45px;position:absolute;left:0;top:0px;background:#fafafa;border:1px solid #ccc;border-radius:5px;padding:5px 0 5px 10px;box-sizing:border-box;line-height: 30px} .f_group .cur_select{display:inline-block;background:#fafafa url(downselect.png) no-repeat right !important;} .f_group .downselect{opacity:0;filter:alpha(opacity:0;);} </style> </head> <body> <h2>自定义样式下拉菜单1</h2> <div class="f_group"> <span class="f_select cur_select" id="cur-select">星期一</span> <select class="f_select downselect" id="borrowtype"> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> <option value="5">星期五</option> </select> </div> <script> $('#borrowtype').on('change',function(){ $('#cur-select').html($('#borrowtype option:selected').text()); }); </script> </body> </html>
自定义样式下拉菜单-2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>自定义样式下拉菜单2</title> <style> body{background:lavender;margin:30px;} .styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; /*for chrome*/ } .styled-select { border:1px solid #333; width: 240px; height: 34px; overflow: hidden; background: url(new_arrow.jpg) no-repeat right #ddd; } </style> </head> <body> <h2>自定义样式下拉菜单2</h2> <div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div> <script> </script> </body> </html>
总结:个人觉得第一种方法较好。
[k]自定义样式下拉菜单的更多相关文章
- angular 实现自定义样式下拉菜单
自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友. 下面上代码: <!doctype html> <html lang="en" ng ...
- [deviceone开发]-多种样式下拉菜单demo
一.简介 该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单 主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单 主要用到的控件是do_A ...
- CSS 实现样式下拉菜单
下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
- 大气漂亮的jQuery水晶样式下拉菜单
预览地址:http://demo.zzblo.com/sc/2013/11/201311131041 下载地址:http://sc.zzblo.com/js/201311/79.html
- 自定义 select 下拉菜单
.selectBeautifyMainStyle{ color: #9fa0a0; font-size: 14px; font-family: "alegreya_sansthin" ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- SpinnerViewPop【PopWindow样式(单选)、Dialog样式(单选+多选)的下拉菜单】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对下拉菜单的文本区域和列表区域进行了封装.包括两种展现方式:popwindow(单选).dialog(单选+多选) 因为该封装需要在 ...
- 【Android初级】如何实现一个有动画效果的自定义下拉菜单
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
随机推荐
- bootloader (run in CLI or Qt-GUI mode)
1.PC端 https://github.com/cidadao/efm32_loader http://theramblingness.com/2015/07/16/a-gui-and-cli-ut ...
- lombok+slf4j+logback SLF4J和Logback日志框架详解
maven 包依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lomb ...
- centos 7.0 查看内存使用情况 和 查看硬盘使用情况
在系统平时使用中 ,最重要的三个方面 内存使用 硬盘使用 CPU负载 这些 自己觉得 比较重要 1.内存使用情况 首先就是内存查看 命令free -m -m 表示单位是M 主要看第一行Mem ...
- Apache解析漏洞详解
很多次听到人说apache的“解析漏洞”了,正好今天又有人问,那就简单科普一下这个“解析漏洞”是何物. 先来看测试过程和结果的对比吧. 结果一 首先,我安装了apache 2.x版本,同时以modul ...
- php.ini中有关安全的设置
php的默认配置文件在 /usr/local/apache2/conf/php.ini,通过为了使你的web更安全,我们需要对php.ini进行一些设置! (1) 打开php的安全模式 php的安全模 ...
- Python开发【第七篇】:面向对象
Python之路[第五篇]:面向对象及相关 面向对象基础 基础内容介绍详见一下两篇博文: 面向对象初级篇 面向对象进阶篇 其他相关 一.isinstance(obj, cls) 检查是否obj是否 ...
- Mongodb3.0.6副本集+分片学习笔记
一.使用问题记录 1. mongodb3.0.6使用mongostat参数 >./mongostat -h 127.0.0.1:27017 -u root -p 123456 /authenti ...
- hibernate4中使用Session doWork()方法进行jdbc操作(代码)
Hibernate3.3.2版本中getSession().connection()已被弃用,hibernate4中官方推荐使用Session doWork()方法进行jdbc操作 首先看看Work接 ...
- iOS钥匙串
钥匙串 苹果的"生态圈",钥匙串访问,使用 AES 256 加密算法,能够保证用户密码的安全 钥匙串访问SDK,是苹果在 iOS 7.0.3 版本以后公布的 钥匙串访问的接口是纯 ...
- 关于IOC的思考
SOLID面向对象的五个设计原则对于开发人员非常重要,其身影在任何大中型软件项目中随处可见,建议必须掌握并灵活应用.此五原则分别为: 单一职责原则(Single Resposibility P ...