<div class="choice_type">
<dl class="select">
<dt></dt>
<dd>
<ul>
<li><a href="#">12131</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉5</a></li>
<li><a href="#">下拉6</a></li>
</ul>
</dd>
</dl>
</div>
css
.choice_type{position:relative;float:left;margin:0 10px;}
.choice_type dt{height:30px;color: #959595; margin-left: -10px; padding-left: 5px; display:inline-block;border:1px solid #DFDFDF;background:#fcfcfb url(../../images/pull_icon.png) no-repeat 80px center;line-height:30px;cursor:pointer;width:85px;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;}
.choice_type dd{position:absolute;left:-50px;top:29px;border:1px solid #d2ccc4;background:#fff;display:none; width: 93px;}
.choice_type dd ul{padding:4px;width:85px;max-height:250px;margin-left: -10px;overflow:auto;}
.choice_type dd ul li a{line-height:28px;margin-left: -10px;display:block;padding:0 8px;text-decoration: none;color: #959595;}
.choice_type dd ul li a:hover{background:#f5f5f5;}
js
//模拟select效果
$(".select").each(function(){
var s = $(this);
var z = parseInt(s.css("z-index"));
var dt = $(this).children("dt");
var dd = $(this).children("dd");
//展开
var _show = function(){
dd.slideDown(200);
dd.addClass("cur");
s.css("z-index",z+1);
};
//关闭
var _hide = function(){
dd.slideUp(200);
dd.removerClass("cur");
s.css("z-index",z);
};
dt.click(function(){dd.is(":hidden")?_show():_hide();});
dd.find("a").click(function(){dt.html($(this).html());_hide();});
$("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
})
分享到:
相关推荐
现在经常遇到需要自定义修改select样式的JS效果,默认的样式已经不能满足小伙伴们的需求了。
现在经常遇到需要自定义修改select样式的JS效果,默认的样式已经不能满足小伙伴们的需求了
在搞前端时发现select样式已经丑到爆了。于是找了一些资源对其进行美化,个人感觉是相当不错的,最起码兼容移动端和pc端,这可是它的优势哦
重新定义的select视觉样式 突破select下来框的默认样式 不能修改的困境
本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式。于是在网上搜索了一下,才知道,原来这个select是不...
本特效经过JS改编,将原本默认的select下拉菜单样式,修改为我们所设计的样式。当然,你也可以将它修改为你所需要的样式,懒人之家推荐下载
如何修改elementUI提供的el-select组件的样式 网上有很多关于这个的解决方式: 1、找到下拉框的类名,写个全局样式覆盖掉就行了 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改...
使用appearance:none去除select的默认样式,配合使用gradient、background-size,background-position,拼出自定义的样式,大家可以发挥想象力做出绚丽的select
现在经常遇到需要自定义修改select样式的JS效果,默认的样式已经不能满足小伙伴们的需求了。
替换:创建自己的 HTML 以简化样式,通常保留原始的 select 元素以实现可访问性 自定义:您必须编写/复制原始 HTML,它不涉及默认选择 ####Desktop 浏览器支持的 IE11 IE8 Chrome(40) IE9 火狐(34) 默
再次更改代码的时候,因为城市下拉列表是从数据库查出来的,所以这时候就想到了一起以前用到的一个方法:select重新渲染 就是把未渲染的元素该怎么设置值还怎么设置值,然后把layer渲染出来的页面样式,从新再渲染一...
之前跟懒人们介绍过一款类似的select下拉导航效果 不过那个只支持一级导航 今天特意将代码稍作修改后,可支持二级导航向右滑动效果 注意:默认代码只支持二级导航文字点击后赋值内容给p标签 要想一...
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除。 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持。 解决思路(从el-...
友情提醒:修改风格设置必须具备一定网页css样式设计知识,建议您找些这方面的书看一下,在定义中也不能使用单引号或双引号,否则会容易造成程序错误。 ============================...
多选 修改版本 这是修改后的版本(从 1.2.1版本派生),以添加其他功能(我是作者) , 和所需的...offsetLeft (默认为0),如果我们想让drop与select元素偏移(默认情况下,它与0 offset的元素向左对齐) 设置时,
有兴趣可以修改样式表文件定义新的皮肤。 4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏)...
vue-treeSelect Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build 组件效果如下: 如果能满足您的需求,麻烦爹妈给一个 ...
基于select2默认样式(难看) 是否执行了不属于选择组件的事情,例如数据获取 大小是另一个问题。 尽管压缩后的代码可能并不庞大,但仍然必须在客户端上执行这些代码,这对移动设备而言并不理想。 基于
cpr选择 冠层React选择要求React^ 0.14.2 Lodash方法findIndex安装通过npm install --save cpr-select 加载所需的样式表src/select.css 可选-如果您想要一些默认样式,请使用样式表: build/external-styles.css用法...