`
妖术在烧纸
  • 浏览: 9973 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

修改默认的select样式

阅读更多
<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():"";});
	})
分享到:
评论

相关推荐

    css实现表单Select样式美化

    通过以上步骤,我们可以实现一个美观且具有交互反馈的自定义Select样式。然而,值得注意的是,由于浏览器对Select的渲染方式限制,某些高级的定制可能需要借助JavaScript库来实现。在实际项目中,根据需求和目标用户...

    checkbox radio select 样式修改样例

    本教程将详细介绍如何修改`checkbox`、`radio`和`select`的样式。 首先,我们需要理解CSS(层叠样式表)如何与这些元素交互。`checkbox`和`radio`是HTML的`input`类型,它们默认情况下是不可直接设置样式的,因为...

    兼容火狐select样式.zip

    "兼容火狐select样式案例"是一个针对Firefox浏览器进行CSS样式调整的示例,目的是使得在Firefox上的下拉菜单样式与其它浏览器保持一致或者达到预期的设计效果。 在Firefox中,`&lt;select&gt;`元素的默认样式通常比较朴素...

    select 分组下拉菜单自定义样式

    然而,浏览器默认的`select`样式通常较为简单,不能满足所有设计需求。本话题将深入探讨如何自定义`select`分组下拉菜单的样式,以实现更美观且功能丰富的交互效果。 首先,我们需要了解`&lt;select&gt;`的基本结构。一个...

    jquery select 样式框架

    《jQuery Select样式框架详解》 在网页开发中,选择框(select)是常见的表单元素,但其默认样式往往显得单调且不具吸引力。为此,开发者们常常利用jQuery和其他前端库来增强select元素的视觉效果,使其更符合现代...

    仿select样式插件

    为了解决这个问题,"仿select样式插件"应运而生。这类插件主要目标是通过JavaScript和CSS来模拟`&lt;select&gt;`的行为,提供更加灵活的样式定制能力。 仿select样式插件的工作原理通常是将`&lt;select&gt;`元素隐藏,然后使用`...

    css 设置下拉列表 select 样式

    当涉及到交互式的表单元素时,如下拉列表`&lt;select&gt;`,CSS的运用就显得尤为重要,因为它可以帮助我们定制默认样式,提升用户体验。本文将详细探讨如何使用CSS设置下拉列表`&lt;select&gt;`及其选项`&lt;option&gt;`的样式。 首先...

    select美化HTML的select标签的原始样式,并且不影响原始select的事件方法调用

    然而,直接修改`&lt;select&gt;`的样式可能会导致一些问题,比如失去原生的交互效果,如滚动和键盘导航。为了解决这个问题,我们可以创建一个自定义的组件,如`lzy-custom-select`,这个组件将`&lt;select&gt;`元素包装在一个更...

    jquery自定义select下拉样式.zip

    然后,我们可以使用各种方法来操作这些元素,比如`.addClass()`和`.removeClass()`用于添加或移除类名,`.html()`用于更改元素内容,`.css()`用于修改样式属性。 自定义Select样式通常包括以下几个步骤: 1. **...

    select 去样式美化(完美兼容)

    然而,浏览器默认的`select`样式在不同的平台和浏览器之间存在差异,尤其是在IE浏览器中,其样式控制经常给开发者带来困扰。"select去样式美化(完美兼容)"是一个针对这个问题的解决方案,它旨在提供一种方法,通过...

    jQuery实现select下拉框样式美化效果

    通过CSS可以改变select的外观,但要注意由于浏览器的限制,直接修改原生select样式的效果有限。可以考虑创建一个自定义的div结构,用jQuery监听select的事件,手动更新div的内容和样式。例如: ```html ...

    select样式

    在描述中提到的"select样式"可能是指对下拉菜单的美化,比如更改下拉箭头的样式、调整边框、设置背景颜色、修改字体等。这些改进可以使用户界面更加吸引人,提高用户体验。 在提供的文件名列表中: 1. `btn_down_s....

    select默认样式美化代码兼容移动端和pc端

    在标题和描述中提到的“select默认样式美化代码兼容移动端和PC端”就是一个解决这个问题的方案。以下将详细探讨如何实现这一目标: 首先,我们看到代码片段中使用了一个`&lt;div&gt;`元素来包裹`&lt;select&gt;`,这是创建...

    html5 IOS下拉框样式

    1. **使用CSS覆盖默认样式**:虽然不能完全改变`&lt;select&gt;`的原生外观,但可以尝试调整边框、阴影、填充等属性。例如: ```css select { appearance: none; /* 移除默认样式 */ -webkit-appearance: none; /* ...

    js+css美化select,简单易用代码少,可以自己控制样式

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉菜单,但其默认样式在不同浏览器间可能存在差异,且难以自定义。为了提供更美观、一致的用户体验,开发者经常使用JavaScript和CSS来增强`&lt;select&gt;`元素的外观和功能。...

    基于jQuery的select样式美化代码.zip

    "基于jQuery的select样式美化代码.zip"这个压缩包中,很可能包含了一套用于改进默认`&lt;select&gt;`样式的jQuery插件或库。这个插件通常会提供自定义的样式、动画效果以及更友好的交互性。 jQuery是一款广泛使用的...

    下拉框、下拉控件之Select2内含css和js

    4. **可扩展性**:`Select2` 的API允许开发者添加自定义行为,如监听事件、修改默认行为等,实现更复杂的功能。 5. **主题兼容**:`Select2` 可以很好地与各种CSS框架(如Bootstrap)集成,保持整体设计的一致性。 ...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富的功能扩展,其中就包括了对Select元素的样式定制。这里我们要探讨的是一...

    CSS自定义select下拉选择框的样式(不用其他标签模拟)

    本文主要讲述了如何使用纯CSS技术自定义select下拉选择框的样式,目的是覆盖掉浏览器默认的样式。虽然直接使用CSS难以完全解决自定义样式的问题,因为某些浏览器的默认样式在兼容性方面难以处理,但本文还是提供了一...

    select标签边框的颜色select标签边框的颜色

    然而,`&lt;select&gt;` 标签的默认样式可能并不符合所有设计需求,因此,调整其边框颜色常常是网页定制化过程中的一个环节。 ### 1. CSS 样式控制 HTML 元素的外观通常由 CSS(层叠样式表)来控制。对于 `&lt;select&gt;` ...

Global site tag (gtag.js) - Google Analytics