自定义select样式
<!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样式的更多相关文章
- 打造自定Select样式
打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...
- 自定义select模拟--基于jQuery
说明 模拟select,实现原生select不能实现的样式 将html结构入在Html页面中,css,js做分离 开发人员引用只要引入相关文件,并$().selectbox()就可转换样式,有更新 ...
- 【笔记】css 自定义select 元素的箭头样式
原文链接:https://www.imooc.com/qadetail/187585?t=281881 最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
- jquery插件-自定义select
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个 ...
- WPF自定义Window样式(1)
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...
- 微信小程序之自定义select下拉选项框组件
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
- 通过css属性hack完成select样式美化,并兼容IE
最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...
随机推荐
- fastCGI模块
这个模块允许nginx同FastCGI协同工作,并且控制哪些参数将被安全传递.例: location / { fastcgi_pass localhost:9000; fastcgi_index in ...
- IDEA Tomcat服务器 更新.jsp时,页面刷新无法同步修改
这是因为在配置服务时没有配置好: on frame deactivation部分
- sklearn_算法选择
- 【LeetCode】006. ZigZag Conversion
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- node.js 笔记(一)
参考:https://github.com/alsotang/node-lessons 感谢!!! 本文属于小白入门级笔记,请大牛自动屏蔽!!! 1. 开发环境 os: 10.12.6 nod ...
- 【转】JVM虚拟性能分析
JDK自带的JAVA性能分析工具.它已经在你的JDK bin目录里了,只要你使用的是JDK1.6 Update7之后的版本.点击一下jvisualvm.exe图标它就可以运行了. 这里是VisualV ...
- VMware tools的使用
现在的开发环境基本上都是lnmp,所以我们需要在windows下使用虚拟机来搭建开发环境, 但是 在本地写好代码以后,需要上传到虚拟机的运行目录,每次修改都需要上传??? 不存在的!!! 使用Vmwa ...
- Angular5学习笔记 - 创建组件(四)
一.创建组件 ng generate component component-name #简写 ng g c component-name ng generate directive|pipe|ser ...
- ramfs, rootfs and initramfs
ramfs, rootfs and initramfs October 17, 2005 Rob Landley <rob@landley.net> =================== ...
- spring学习七
一: web.xml中常用配置元素? <servlet></servlet>: 在向servlet或JSP页面制定初始化参数或定制URL时,首先命名servlet或JSP页面. ...