<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            word-wrap:break-word;

        }

        a:link, a:visited {

            color: #656d78;

            text-decoration: none;

        }

        .login_slct a {

            margin-right: -8px;

            padding-right: 16px;

            background: url(images/arrwd.gif) no-repeat 100% 50%;

        }

        a{

            outline: none;

        }

        .sltm{

            padding: 5px 11px 5px 10px;

            border: 1px solid #DDD;

            background-color: #FFF;

            text-align: left;

        }

        .sltm  ul{

            list-style: none;

            margin: 0;

            padding: 0;

        }

        .sltm li{

            padding: 2px 0;

            color: #666;

            cursor: pointer;

            list-style: none;

        }

    </style>

    <script src="js/jquery.min.js"></script>

    <script>

        function checkStatus(){

            if(!flag){

                $("#loginfield_ctrl_menu").fadeOut();

            }

        }

         var flag=false;

         $(document).ready(function(){

            $("#loginfield_ctrl").click(function(e){

                var offset=  $("#loginfield_ctrl").offset();

                $("#loginfield_ctrl_menu").css({"left":offset.left-5,"top":offset.top+15});

                $("#loginfield_ctrl_menu").fadeIn();

            });

             $("#loginfield_ctrl_menu").mouseleave(function(){

                 $("#loginfield_ctrl_menu").fadeOut();

                 flag=false;

             });

             $("#loginfield_ctrl_menu").mouseover(function(){

                 flag=true;

             });

             $("#loginfield_ctrl").mouseleave(function(){

                 setTimeout("checkStatus()", 500);

             });

             $("#loginfield_ctrl_menu li").click(function(){

                 var index=$(this).index();

                 var text=$(this).text();

                 $("#loginfield_ctrl").text(text);

                 $("option").val(index+1);

             });

        });

    </script>

</head>

<body>

<div style="position: relative;left: 100px;top:200px">

    <form action="www.baidu.com" method="get">

<span class="login_slct">

    <select name="loginfield" style="float: left; display: none;" width="45" id="loginfield_LieJW" s>

        <option value="1" selected="selected"></option>

    </select>

    <a href="javascript:;" id="loginfield_ctrl" style="width:45px" tabindex="1">Email</a>

</span>

        <input value="submit" type="submit" />

    </form>

</div>

<div style="height: 200px">

asdfasfd

</div>

<div id="loginfield_ctrl_menu" class="sltm" style="width: 50px;position: absolute; z-index: 301; display: none;">

    <ul>

        <li>Email</li>

        <li>用户名</li>

    </ul>

</div>

</body>

</html>

好久没用jquery了，写的很烂，但是大致逻辑实现了，希望哪位能优化下

自定义select样式的更多相关文章

  1. 打造自定Select样式

    打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...

  2. 自定义select模拟--基于jQuery

      说明 模拟select,实现原生select不能实现的样式 将html结构入在Html页面中,css,js做分离 开发人员引用只要引入相关文件,并$().selectbox()就可转换样式,有更新 ...

  3. 【笔记】css 自定义select 元素的箭头样式

    原文链接:https://www.imooc.com/qadetail/187585?t=281881 最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css ...

  4. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  5. jquery插件-自定义select

        由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个 ...

  6. WPF自定义Window样式（1）

    1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...

  7. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

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

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

  9. Siteserver-stl:searchOutput(搜索结果)自定义显示样式

    stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...

随机推荐

  1. 1.mysql优化---优化入门之MySQL的优化介绍及执行步骤

    优化到底优化什么?      优化,一直是面试最常问的一个问题.因为从优化的角度,优化的思路,完全可以看出一个人的技术积累.那么,关于系统优化,假设这么个场景,用户反映系统太卡(其实就是高并发),那么 ...

  2. java微信学习 接入

    现在实习的公司要做微信开发,然而一直没安排任务,所以一直在看微信接口,记录下学习的内容 微信开发肯定要看的就是微信公众平台开发者文档,上面有每种接口的调用格式,刚开始学习的时候自己申请了一个订阅号,个 ...

  3. [基本操作] kd 树

    概念就不说了吧,网上教程满天飞 学了半天才知道,kd 树实质上只干了两件事情: 1.快速定位一个点 / 矩形 2.有理有据地优化暴力 第一点大概是可以来做二维平面上给点/矩形打标记的问题 第二点大概是 ...

  4. HihoCoder1078线段树的区间修改（线段树+lazy）

    每个测试点(输入文件)有且仅有一组测试数据. 每组测试数据的第1行为一个整数N,意义如前文所述. 每组测试数据的第2行为N个整数,分别描述每种商品的重量,其中第i个整数表示标号为i的商品的重量Pi. ...

  5. JavaScript6 新语法 let 有什么优势

    最近看国外的前端代码时,发现ES6的新特性已经相当普及,尤其是 let,应用非常普遍 虽然 let 的用法与 var 相同,但不管是语法语义上,还是性能上,都提升了很多,下面就从这两方面对比一下 语法 ...

  6. server2012/win8 卸载.net framework 4.5后 无法进入系统桌面故障解决【转】

    都重装过一次了,第二次被坑了,真的是痛苦的经历 只剩下的cmd什么命令都不能执行啊,powershell也执行不了呀[网上都是说powershell切换的] 故障:服务器装的是windows2012 ...

  7. Js里头的对象字面量

    JavaScript 对象字面量 在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ) ...

  8. HIVE-执行hive的几种方式，和把HIVE保存到本地的几种方式

    网上相关教程很多,这里我主要是简单总结下几种常用的方法,方便日后查询. 第一种,在bash中直接通过hive -e命令,并用 > 输出流把执行结果输出到制定文件 hive -e "se ...

  9. 简谈Tomcat调优

    一.Tomcat和apache的比较 共同点:apache和tomcat都是属于web服务器. 不同点:他们是两个不同的容器,承载的东西不一样,tomcat属于一种java应用的服务 器,只针对jav ...

  10. Azure的CentOS上安装LIS (Linux Integration Service)

    Azure上虚拟化技术都是采用的Hyper-v,每台Linux虚拟机都安装了LIS(Linux Integration Service).LIS的功能是为VM提供各种虚拟设备的驱动.所以LIS直接影响 ...