美化的select下拉框
ie7浏览器以后的下拉框,给他加上边框样式,是没用的。要是想做出样式好看的下拉框需要用js或者jquery来模拟实现。
代码如下:
- <div class="r">
- <dl class="link" id="link">
- <dt>友情链接</dt>
- <dd>
- <ul>
- <li><a href="###" target="_blank">友情链接一</a>
- `<a href="###" target="_blank">友情链接二</a>`</li> </ul>
- </dd>
- </dl>
- </div>
css代码:
- div.bottomTop div.bottomTopRight dl.link {
- margin-right:0px;
- display:inline-block;
- border:1px solid #484848;
- margin-left:15px;
- font-size:12px;
- margin-top:15px;
- width:90px;
- height:18px;
- }
- div.bottomTop div.bottomTopRight dl.link dt {
- background:url(../images/select_bg.gif) no-repeat 7px center;
- color:#515151;
- text-indent:18px;
- height:18px;
- line-height:18px;
- width:90px;
- cursor:pointer;
- font-family:宋体;
- }
- div.bottomTop div.bottomTopRight dl.link dd {
- display:none;
- position:relative;
- }
- div.bottomTop div.bottomTopRight dl.link ul {
- position:absolute;
- right:0px;
- bottom:19px;
- display:block;
- width:90px;
- background:#999999;
- }
- div.bottomTop div.bottomTopRight dl.link ul li {
- height:22px;
- line-height:22px;
- text-align:left;
- text-indent:18px;
- }
- div.bottomTop div.bottomTopRight dl.link ul li a {
- color:#515151;
- font-family:宋体;
- }
- jquery代码:
- <script type="text/javascript">
- $(function(){
- $('#link dt').click(function(){
- $('#link dd').toggle();
- });
- })
- </script>
- 要注意一点的是,要实现这个效果,<dd></dd>千万别加高度,
- jquery代码:
美化的select下拉框的更多相关文章
- jQuery多级联动美化版Select下拉框
在线演示 本地下载
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
- 好看的Select下拉框是如何制造的
现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- s:select下拉框validation验证
S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
随机推荐
- Django基于正则表达式的URL(1)
1. 此时,用户只能看到列表,如果用户想查看详细信息,应该再增加程序. 2. 把信息用a标签包起来以后,详细信息就有了可以跳转的功能. . 3. 点击不同的用户名时,获取到不同的信息. 3.1 在ur ...
- linux系统常见命令以及操作
2.安装xshell,安装完打开,配置回话,输入名称(随便).SSH.主机(打开linux,点击右上角电脑图标system etho进行联网,打开终端输入ifconfig回车,找到inet add地址 ...
- 【loj6179】Pyh的求和
Portal -->loj6179 Solution 这题其实有一个式子一喵一样的版本在bzoj,但是那题是\(m\)特别大然后只有一组数据 这题多组数据== 首先根据\(\v ...
- 【字符串】KMP字符串匹配
百度百科 Definition \(KMP\)算法是一个字符串匹配算法.他接收两个字符串\(A,B\),返回\(B\)在\(A\)中出现的所有位置. 以下称需要被匹配的串\(A\)为主串,可能在主串中 ...
- mysql三-6:完整性约束
一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性 主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KE ...
- c/c++中的预编译指令总结
预处理指令提供按条件跳过源文件中的节.报告错误和警告条件,以及描绘源代码的不同区域的能力.使用术语“预处理指令”只是为了与 C 和 C++ 编程语言保持一致.在 C# 中没有单独的预处理步骤:预处理指 ...
- Codeforces Global Round 2 题解
Codeforces Global Round 2 题目链接:https://codeforces.com/contest/1119 A. Ilya and a Colorful Walk 题意: 给 ...
- [linux]linuxI/O测试的方法之dd
参考http://www.thomas-krenn.com/en/wiki/Linux_I/O_Performance_Tests_using_dd Measuring Write Performan ...
- java project转变成java web project
首先,你的eclipse必须得装有web插件 1.找到项目工作空间目录,打开.project文件,并修改文件, 修改如下: 找到:<natures> </natures&g ...
- DHCP及DHCP多作用域服务器工作原理
一.DHCP服务是什么 DHCP称为动态主机配置协议.DHCP服务允许工作站连接到网络并且自动获取一个IP地址.配置DHCP服务的服务器可以为每一个网络客户提供一个IP地址.子网掩码.缺省网关.一个W ...