我们知道,用css控制select元素的时候,各个浏览器显示不一样,所以如果实在是需要做一个丰富多彩的select下拉框,解决办法一般是用div或者其他元素来模仿select,看上去是一个select。
<!--start select-down-box www.uiej.com 2013-5-21-->
<style type="text/css">
.drop-down-box-width{width:200px;/*change if you like*/}
.drop-down-box-hwj{float:left;border:1px solid #ccc;background:#eaeaea;line-height:25px;height:25px;position:relative;font-size:12px;}
.drop-down-box-hwj .drop-down-box-name{overflow:hidden;line-height:25px;height:25px;padding:0 5px;color:#333;font-weight:bold;}
.drop-down-box-hwj .drop-down-triangle{color:#333;border:1px solid #999;line-height:23px;height:23px;width:20px;text-align:center;text-shadow:1px 1px 1px #fff;position:absolute;top:0;right:0;background:#fff;}
.drop-down-box-hwj ul{padding:0;margin:0;position:absolute;left:-1px;top:25px;background:#fff;border:1px solid #ccc;z-index:100;box-shadow:0 0 10px #ccc;height:auto;zoom:1;overflow:hidden}
.drop-down-box-hwj li{padding:0;margin:0;list-style-type:none;display:block;float:left;width:100%;}
.drop-down-box-hwj li a{display:block;text-indent:8px;padding:0 5px;color:#369;text-decoration:none;border:none;}
.drop-down-box-hwj li a:hover{display:block;text-indent:8px;color:#fff;background:#999;text-shadow:0 -1px 0 #666;}
</style>
<div class="drop-down-box-hwj drop-down-box-width" onmouseover="show_control('drop-down-options');" onmouseout="hidden_control('drop-down-options');">
<div class="drop-down-box-name">—— 请选择 ——</div>
<div class="drop-down-triangle">▼</div>
<ul id="drop-down-options" class="drop-down-box-width" style="display:none" onclick="hidden_control('drop-down-options');">
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容选项内容</a></li>
<li><a href="#">选项内容</a></li>
<li><a href="#">选项内容</a></li>
</ul>
<script type="text/javascript">
function show_control(obj){var dv=document.getElementById(obj);dv.style.display="block";}
function hidden_control(obj){var dv =document.getElementById(obj);dv.style.display="none";}
</script>
</div>
<!--end select-down-box www.uiej.com 2013-5-21-->
分享到:
相关推荐
基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
div+css做的下拉框
纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框...
用DIV+CSS封装的一个下拉框控件,效果不错
html中默认的select太丑了,使用jquery+html自定义下拉框。样式随心所欲。
js css 模拟html下拉框,很不容易找到的资源,效果很不错。
divcss模拟select 下拉框 select 改变样式
div+css打造select下拉菜单,可自己修改相应样式!!!
div+css各种下拉菜单,都是测试成功
jq+css实现的select多选下拉框美化
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
之前我们分享过一款CSS3带小图标下拉菜单,它更多的是一款菜单,但是今天要分享的一款CSS3自定义下拉框取代了传统的Select样式,用不一样的风格来让select更加美观。这款CSS3下拉框还有3D立体的卡片折叠动画效果,...
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
DIV+CSS下拉菜单,资源里面包括5个个性的下拉菜单 需要者快下吧!
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
CSS+jQuery简单实现select下拉框,用到font-awesome字体库,主要用来实现下拉箭头,可以用图标替代,样式可以自己定义修改, 兼容IE8+、Chrome、Firefox...
select下拉框列表实现图片内容显示,$("#***").select()格式
这个是我花了20分钟自己从设计图片,写CSS,到调整,来完成的一个自己认为很漂亮的自定义下来菜单,使用起来非常简单,只需外调一个css和一个js文件,页面中仍然按照原来的写<select>标签,另外,只在IE6.0的版本上...
仿GOOGLE搜索下拉框的JAVA项目,struts2+hibernate+mysql+ajax,Eclipse 项目,非常简单的,初学者必备
主要为大家详细介绍了Bootstrap框架下下拉框select搜索功能,感兴趣的小伙伴们可以参考一下