<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样式。然而,值得注意的是,由于浏览器对Select的渲染方式限制,某些高级的定制可能需要借助JavaScript库来实现。在实际项目中,根据需求和目标用户...
本教程将详细介绍如何修改`checkbox`、`radio`和`select`的样式。 首先,我们需要理解CSS(层叠样式表)如何与这些元素交互。`checkbox`和`radio`是HTML的`input`类型,它们默认情况下是不可直接设置样式的,因为...
"兼容火狐select样式案例"是一个针对Firefox浏览器进行CSS样式调整的示例,目的是使得在Firefox上的下拉菜单样式与其它浏览器保持一致或者达到预期的设计效果。 在Firefox中,`<select>`元素的默认样式通常比较朴素...
然而,浏览器默认的`select`样式通常较为简单,不能满足所有设计需求。本话题将深入探讨如何自定义`select`分组下拉菜单的样式,以实现更美观且功能丰富的交互效果。 首先,我们需要了解`<select>`的基本结构。一个...
《jQuery Select样式框架详解》 在网页开发中,选择框(select)是常见的表单元素,但其默认样式往往显得单调且不具吸引力。为此,开发者们常常利用jQuery和其他前端库来增强select元素的视觉效果,使其更符合现代...
为了解决这个问题,"仿select样式插件"应运而生。这类插件主要目标是通过JavaScript和CSS来模拟`<select>`的行为,提供更加灵活的样式定制能力。 仿select样式插件的工作原理通常是将`<select>`元素隐藏,然后使用`...
当涉及到交互式的表单元素时,如下拉列表`<select>`,CSS的运用就显得尤为重要,因为它可以帮助我们定制默认样式,提升用户体验。本文将详细探讨如何使用CSS设置下拉列表`<select>`及其选项`<option>`的样式。 首先...
然而,直接修改`<select>`的样式可能会导致一些问题,比如失去原生的交互效果,如滚动和键盘导航。为了解决这个问题,我们可以创建一个自定义的组件,如`lzy-custom-select`,这个组件将`<select>`元素包装在一个更...
然后,我们可以使用各种方法来操作这些元素,比如`.addClass()`和`.removeClass()`用于添加或移除类名,`.html()`用于更改元素内容,`.css()`用于修改样式属性。 自定义Select样式通常包括以下几个步骤: 1. **...
然而,浏览器默认的`select`样式在不同的平台和浏览器之间存在差异,尤其是在IE浏览器中,其样式控制经常给开发者带来困扰。"select去样式美化(完美兼容)"是一个针对这个问题的解决方案,它旨在提供一种方法,通过...
通过CSS可以改变select的外观,但要注意由于浏览器的限制,直接修改原生select样式的效果有限。可以考虑创建一个自定义的div结构,用jQuery监听select的事件,手动更新div的内容和样式。例如: ```html ...
在描述中提到的"select样式"可能是指对下拉菜单的美化,比如更改下拉箭头的样式、调整边框、设置背景颜色、修改字体等。这些改进可以使用户界面更加吸引人,提高用户体验。 在提供的文件名列表中: 1. `btn_down_s....
在标题和描述中提到的“select默认样式美化代码兼容移动端和PC端”就是一个解决这个问题的方案。以下将详细探讨如何实现这一目标: 首先,我们看到代码片段中使用了一个`<div>`元素来包裹`<select>`,这是创建...
1. **使用CSS覆盖默认样式**:虽然不能完全改变`<select>`的原生外观,但可以尝试调整边框、阴影、填充等属性。例如: ```css select { appearance: none; /* 移除默认样式 */ -webkit-appearance: none; /* ...
在网页设计中,`<select>`元素通常用于创建下拉菜单,但其默认样式在不同浏览器间可能存在差异,且难以自定义。为了提供更美观、一致的用户体验,开发者经常使用JavaScript和CSS来增强`<select>`元素的外观和功能。...
"基于jQuery的select样式美化代码.zip"这个压缩包中,很可能包含了一套用于改进默认`<select>`样式的jQuery插件或库。这个插件通常会提供自定义的样式、动画效果以及更友好的交互性。 jQuery是一款广泛使用的...
4. **可扩展性**:`Select2` 的API允许开发者添加自定义行为,如监听事件、修改默认行为等,实现更复杂的功能。 5. **主题兼容**:`Select2` 可以很好地与各种CSS框架(如Bootstrap)集成,保持整体设计的一致性。 ...
在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富的功能扩展,其中就包括了对Select元素的样式定制。这里我们要探讨的是一...
本文主要讲述了如何使用纯CSS技术自定义select下拉选择框的样式,目的是覆盖掉浏览器默认的样式。虽然直接使用CSS难以完全解决自定义样式的问题,因为某些浏览器的默认样式在兼容性方面难以处理,但本文还是提供了一...
然而,`<select>` 标签的默认样式可能并不符合所有设计需求,因此,调整其边框颜色常常是网页定制化过程中的一个环节。 ### 1. CSS 样式控制 HTML 元素的外观通常由 CSS(层叠样式表)来控制。对于 `<select>` ...