自定义样式下拉菜单-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]自定义样式下拉菜单的更多相关文章

  1. angular 实现自定义样式下拉菜单

    自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友. 下面上代码: <!doctype html> <html lang="en" ng ...

  2. [deviceone开发]-多种样式下拉菜单demo

    一.简介 该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单 主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单 主要用到的控件是do_A ...

  3. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  4. 大气漂亮的jQuery水晶样式下拉菜单

    预览地址:http://demo.zzblo.com/sc/2013/11/201311131041 下载地址:http://sc.zzblo.com/js/201311/79.html

  5. 自定义 select 下拉菜单

    .selectBeautifyMainStyle{ color: #9fa0a0; font-size: 14px; font-family: "alegreya_sansthin" ...

  6. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  7. SpinnerViewPop【PopWindow样式（单选）、Dialog样式（单选+多选）的下拉菜单】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对下拉菜单的文本区域和列表区域进行了封装.包括两种展现方式:popwindow(单选).dialog(单选+多选) 因为该封装需要在 ...

  8. 【Android初级】如何实现一个有动画效果的自定义下拉菜单

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

  9. jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

随机推荐

  1. GoLang之方法与接口

    GoLang之方法与接口 Go语言没有沿袭传统面向对象编程中的诸多概念,比如继承.虚函数.构造函数和析构函数.隐藏的this指针等. 方法 Go 语言中同时有函数和方法.方法就是一个包含了接受者的函数 ...

  2. TF-IDF 加权及其应用

    TF-IDF 加权及其应用 TF-IDF(term frequency–inverse document frequency)是一种用于资讯检索的常用加权技术.TF-IDF是一种统计方法,用以评估某个 ...

  3. Effective Objective-C 2.0 — 第五条用枚举表示状态、选项、状态码 （未看完）

    枚举是一种常量命名方式.某个对象所经历的各种状态就可以定义为一个简单的枚举集.(enumeration set) 编译器会为枚举分配一个独有的编号,从0开始,每个枚举递增1.实现枚举所用的数据类型取决 ...

  4. Asp.Mvc中的text实现 辅助用户输入 灰色字体

    在开发Web应用程序中经常需要用户在文本框输入信息,为了提高程序人性化设置以及用户体验效果常常需要在文本框中显示灰色字体辅助用户输入 如:

  5. Kafka Producer相关代码分析【转】

    来源:https://www.zybuluo.com/jewes/note/63925 @jewes 2015-01-17 20:36 字数 1967 阅读 1093 Kafka Producer相关 ...

  6. hdu5072 Coprime （2014鞍山区域赛C题）（数论）

    http://acm.hdu.edu.cn/showproblem.php?pid=5072 题意:给出N个数,求有多少个三元组,满足三个数全部两两互质或全部两两不互质. 题解: http://dty ...

  7. hdu5024 Wang Xifeng's Little Plot （水

    http://acm.hdu.edu.cn/showproblem.php?pid=5024 网络赛 Wang Xifeng's Little Plot Time Limit: 2000/1000 M ...

  8. php开发中怎么获取服务端MAC地址？

    MAC(Media Access Control或者Medium Access Control)地址,意译为媒体访问控制,或称为物理地址.硬件地址,用来定义网络设备的位置.在php中如何获取MAC(M ...

  9. Java多线程初学者指南（7）：向线程传递数据的三种方法

    在传统的同步开发模式下,当我们调用一个函数时,通过这个函数的参数将数据传入,并通过这个函数的返回值来返回最终的计算结果.但在多线程的异步开发模式下,数据的传递和返回和同步开发模式有很大的区别.由于线程 ...

  10. .Net程序员必须要知道的东西之HttpModules与HttpHandlers介绍

    一.ASP.NET对请求处理的过程: 当客户端请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给ASPNET_ISAPI. ...