select标签的美化及js模拟解决方案

最新推荐文章于 2024-05-24 13:19:01 发布
最新推荐文章于 2024-05-24 13:19:01 发布
阅读量299 收藏
点赞数
分类专栏： JQuery 文章标签： select美化 select高度设置 select模拟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Snoopy7713/article/details/84353373
版权

所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是：

 

  • 不同的浏览器显示的默认下拉框样子不完全相同
  • IE下无法手动设置select的高度（这是最坑爹的！），只能靠font-size撑起来
  • select右侧的下拉箭头是无法使用背景消除的，这就导致无法使用css进行美化
总结起来，解决办法主要有：

  • 将select隐藏掉，而使用div进行模拟
  • 将select透明度设置为0，然后使用相对定位在下方 加一个长得很像select又美化了的div

隐藏方案一般原理如下：
  1. 找到页面需要处理的select，将其隐藏
  2. 根据select的option，创建一个li列表（当然也可以是div），并隐藏。
  3. 在select的位置创建一个div，显示select的值（selected的option）。并使用css对其进行美化，使其看起来像一个select
  4. 添加事件，使点击“select”的时候，显示li列表。并使用相对定位，让这个列表显示在“select”下方
  5. 对li列表添加事件，模拟下拉框的选值过程（点击事件和键盘↑↓事件都要模拟）
  6. 选值完成后，要将选的值显示到上方的“select”，并设置真正的select的值

当然，如果你想做的更复杂点，还可以添加选项搜索、多选、多选后的选项删除等。当时一般原理都跟上面差不多。网上也有很多这样的插件。但使用网上的插件要注意测试浏览器的兼容性，功能越复杂的模拟select，兼容性越不好做

 

如果，你的程序不需要那么复杂的select，那么设置透明度的第二种方案也许适合你。今天要分享给大家的也是这个方案。

它的原理如下：

 

 

  1. 找到当前页面的select，将其透明度设置为0.使其看不见，但是可以点击并选值
  2. 创建一个div，使用相对定位，放置到select下方 ，并通过css控制使其看起来像一个select。为什么一定要放在下方呢？因为这样，我们可以点击真正的select，而用户看起来像是点击的这个模拟的select，因为真正的select是完全透明的。如果放置在上方，则用户点击的是这个模拟的select，真正的select不会展开！！！
  3. 设置div的text为select的值
  4. 添加事件，使真正的select选值后，将值显示到模拟的div上

 

 

先上代码吧：

 

Js代码 复制代码 收藏代码
  1. ( function ($){
  2. var selectFix= function (){
  3. var select=$( this );
  4. //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
  5. $(select).css({
  6. "opacity" :0
  7. });
  8. //找到select的选项
  9. var sOptions= this .get(0).options;
  10. //设置模拟select的值
  11. var setFixDivText= function (selectValue){
  12. var text= "" ;
  13. for ( var i=0;i<sOptions.length;i++){
  14. var option=sOptions[i];
  15. if (option.value==selectValue){
  16. text=$(option).text();
  17. break ;
  18. }
  19. }
  20. return text;
  21. };
  22. //模拟的select
  23. //初始化时要将select的值传入
  24. var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' );
  25. select.after(selectFixDiv);
  26. var left=$(select).offset().left;
  27. var top=$(select).offset().top-1; //因为一般select都有1px的边框，所以这里往上拉1px
  28. $(selectFixDiv).css({
  29. "top" : top,
  30. "left" : left
  31. });
  32. //select选值时，将值显示到模拟的select上
  33. $(select).bind( "change click" , function (){
  34. $(selectFixDiv).text(setFixDivText($( this ).val()));
  35. });
  36. };
  37. $.fn.selectFix=selectFix;
  38. })(jQuery); 
(function($){
	var selectFix=function(){
		var select=$(this);
		//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
		$(select).css({
			"opacity":0
		});
		//找到select的选项
		var sOptions=this.get(0).options;
		//设置模拟select的值
		var setFixDivText=function(selectValue){
			var text="";
			for(var i=0;i<sOptions.length;i++){
				var option=sOptions[i];
				if(option.value==selectValue){
					text=$(option).text();
					break;
				}
			}
			return text;
		};

		//模拟的select
		//初始化时要将select的值传入
		var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>');
		select.after(selectFixDiv);

		var left=$(select).offset().left;
		var top=$(select).offset().top-1;//因为一般select都有1px的边框，所以这里往上拉1px
		$(selectFixDiv).css({
			"top" : top,
			"left" : left
		});
		
		//select选值时，将值显示到模拟的select上
		$(select).bind("change click",function(){
			$(selectFixDiv).text(setFixDivText($(this).val()));
		});
	};
	$.fn.selectFix=selectFix;
})(jQuery);

 

 

插件代码运行：

 

Js代码 复制代码 收藏代码
  1. jQuery(document).ready( function () {
  2. var selects=$( "select.selectInput" );
  3. if (selects.length){
  4. selects.each( function (){
  5. $( this ).selectFix();
  6. });
  7. }
  8. }); 
jQuery(document).ready(function() {
	var selects=$("select.selectInput");
	if(selects.length){
		selects.each(function(){
			$(this).selectFix();
		});
	}
});

下面是html代码：

 

Html代码 复制代码 收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  2. < HTML >
  3. < HEAD >
  4. < TITLE > New Document </ TITLE >
  5. < META NAME = "Generator" CONTENT = "EditPlus" >
  6. < META NAME = "Author" CONTENT = "" >
  7. < META NAME = "Keywords" CONTENT = "" >
  8. < META NAME = "Description" CONTENT = "" >
  9. < script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script >
  10. < script type = text /javascript src = "temp.js" > </ script >
  11. < style >
  12. html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
  13. .dn {display: none;}
  14. select{cursor: pointer;}
  15. input,
  16. select,
  17. textarea,
  18. .selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}
  19. .formText,
  20. .selectInput,
  21. .text,
  22. .selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
  23. .selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
  24. .selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
  25. </ style >
  26. </ HEAD >
  27. < BODY >
  28. < div id = "main" >
  29. < select id = "sex" class = "selectInput" name = "sex" >
  30. < option value = "0" > 男 </ option >
  31. < option value = "1" > 女 </ option >
  32. </ select >
  33. </ div >
  34. </ BODY >
  35. </ HTML > 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
 <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 <script type=text/javascript src="temp.js"></script>

 <style>
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
 </style>
</HEAD>

<BODY>
<div id="main">
	<select id="sex" class="selectInput" name="sex">
		<option value="0">男</option>
		<option value="1">女</option>
    </select>
</div>
</BODY>
</HTML>

 

运行效果如下：


展开前


展开后

 

兼容主流浏览器。

 

 

但也还是有个重大的缺陷，在老版本的ie中，真正select的高度还是无法撑开。所以，用户点击模拟的select的靠下方的位置会发现select无法展开！！

不过设计的艺术在于平衡，如果你无法忍受这个缺陷，可以使用第一种解决方案。

 

 

另外，在测试后，发现如果select处于一个隐藏的容器中，那么显示后，select的位置是一个空白！！

这是怎么回事呢？！

原来，html元素隐藏后是无法获取他的屏幕坐标的！！！ 所以这时候显示出来，真正的select完全透明了，而模拟的select跑到屏幕的左上角去了。因为他获取select的坐标为（0,0）

 

 

不要着急，这个问题有下面的解决办法：

1、单独写代码触发select的美化程序

首先，你需要将上面的美化程序运行代码做以下修改：

 

Js代码 复制代码 收藏代码
  1. jQuery(document).ready( function () {
  2. var selects=$( "select.selectInput" );
  3. if (selects.length){
  4. selects.each( function (){
  5. if (!($( this ).attr( "autoFix" )== "false" )){
  6. $( this ).selectFix();
  7. }
  8. });
  9. }
  10. }); 
jQuery(document).ready(function() {
	var selects=$("select.selectInput");
	if(selects.length){
		selects.each(function(){
			if(!($(this).attr("autoFix")=="false")){
				$(this).selectFix();
			}
		});
	}
});

然后，在隐藏的select上加属性autoFix="false"：

 

Html代码 复制代码 收藏代码
  1. < select id = "sex" class = "selectInput" name = "sex" autoFix = "false" >
  2. < option value = "0" > 男 </ option >
  3. < option value = "1" > 女 </ option >
  4. </ select > 
<select id="sex" class="selectInput" name="sex" autoFix="false">
		<option value="0">男</option>
		<option value="1">女</option>
    </select>

然后，在外部容器显示的时候，手动调用$("#sex").selectFix()

 

2、如果容器的显示或者隐藏是第三方插件控制，修改不方便可考虑下面的方案：

在美化程序中，先判断select是否隐藏，如果否逻辑不变，如果隐藏，则加入一个timer，循环判断元素是否被显示，在其显示的时候再自动调用fix，然后将timer移除

代码如下：

 

Js代码 复制代码 收藏代码
  1. //加上隐藏select的操作
  2. ( function ($){
  3. var selectFix= function (){
  4. var select=$( this );
  5. //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
  6. $(select).css({
  7. "opacity" :0
  8. });
  9. if (!select.is( ":hidden" )){
  10. var sOptions= this .get(0).options;
  11. var setFixDivText= function (selectValue){
  12. var text= "" ;
  13. for ( var i=0;i<sOptions.length;i++){
  14. var option=sOptions[i];
  15. if (option.value==selectValue){
  16. text=$(option).text();
  17. break ;
  18. }
  19. }
  20. return text;
  21. };
  22. var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' );
  23. select.after(selectFixDiv);
  24. var selectWidth=$(select).innerWidth();
  25. var selectFixDivWidth=$(selectFixDiv).innerWidth();
  26. var left=$(select).offset().left;
  27. var top=$(select).offset().top-1;
  28. $(selectFixDiv).css({
  29. "top" : top,
  30. "left" : left,
  31. "margin" : 0
  32. });
  33. $(select).bind( "change click" , function (){
  34. $(selectFixDiv).text(setFixDivText($( this ).val()));
  35. });
  36. } else {
  37. var tasks = function (){
  38. if (!$(select).is( ":hidden" )){
  39. $(select).selectFix();
  40. clearInterval(timer);
  41. }
  42. };
  43. var timer=setInterval(tasks,500)
  44. }
  45. };
  46. $.fn.selectFix=selectFix;
  47. })(jQuery); 
//加上隐藏select的操作
(function($){
	var selectFix=function(){
		var select=$(this);
		//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
		$(select).css({
			"opacity":0
		});

		if(!select.is(":hidden")){
			var sOptions=this.get(0).options;

			var setFixDivText=function(selectValue){
				var text="";
				for(var i=0;i<sOptions.length;i++){
					var option=sOptions[i];
					if(option.value==selectValue){
						text=$(option).text();
						break;
					}
				}
				return text;
			};

			var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>');
			select.after(selectFixDiv);

			var selectWidth=$(select).innerWidth();
			var selectFixDivWidth=$(selectFixDiv).innerWidth();
			var left=$(select).offset().left;

			var top=$(select).offset().top-1;
			$(selectFixDiv).css({
				"top" : top,
				"left" : left,
				"margin" : 0
			});

			$(select).bind("change click",function(){
				$(selectFixDiv).text(setFixDivText($(this).val()));
			});
		}else{
			var tasks = function(){
				if(!$(select).is(":hidden")){
					$(select).selectFix();
					clearInterval(timer);
				}
			};
			var timer=setInterval(tasks,500)
		}
	};
	$.fn.selectFix=selectFix;
})(jQuery);

运行代码跟原来的不变。

 

附件js为最终版。

Snoopy7713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select选择框样式优化
风雪夜过客的博客
05-23 2594
首先要清除选择框默认样式： select{ border: solid 1px #666; appearance:none; -moz-appearance:none; -webkit-appearance:none; } 设置上自己重定义的图标： select{ padding-right:20px; background: url("....
简单的select美化
热门推荐
小白成神路
12-11 2万+
今天一个小页面加个select，默认的太丑，这个页面有没有引入其他文件（连jq都没...）然后查了查有没有超简单的美化，其中两个挺好的记录下 一、纯css+html 简单美化select html: ---请选择-- 男 女 CSS: .shortselect{ backgroun
【特效】select美化
weixin_30555753的博客
05-12 227
select的默认样式往往很丑，为保证页面样式风格统一，需要对select进行美化。虽然其美化的插件很多，一搜一大把，但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单，就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了，样式想怎么写就怎么写，且不限数量。 朴素的效果： html： <div class="select_...
如何对select选择框以及内容选项进行美化
最新发布
emmmaha的博客
05-24 1205
选择框以及其选项内容，您可以使用自定义样式和一些技巧来增强外观。以下是一个示例，演示如何使用CSS来美化。您可以根据需要调整样式的属性值，以使选择框和选项内容更符合您的设计需求。这样就可以通过CSS美化。在上面的示例中，我们使用了一些CSS样式来美化。选择框和选项内容，使其看起来更加漂亮。
最完美的select下拉框美化
yjxfox的专栏
11-16 1090
很多人为select的诸多不完善而头痛，如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件：UU人下拉框 特点1：美化的并且可自定义的外观 UU人下拉框使用JS进行渲染。当页面引入了脚本和CSS后，页面中的下拉框都会变成如下外观： 该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。 UU人下拉框不存在IE6中无法被浮动层遮住
用JavaScript来美化HTML的select标签的下拉列表效果
10-23
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
美化模拟SELECT
04-12
标签“SELECT 模拟 美化 美化模拟SELECT”进一步明确了讨论的主题。"SELECT"是SQL语言中的一个关键字，用于从数据库中选取数据；"模拟"意味着创建了一个类似实际SELECT操作的界面；"美化"则指界面设计的优化，使用户...
JS+CSS美化经典Select选项框插件
07-03
在网页设计中，Select元素是用于创建下拉菜单的基本组件，它通常用于提供一组可选的选项。然而，原生的Select在样式控制上相对有限，导致其在现代...在实际开发中，不断尝试和优化，才能找到最适合项目需求的解决方案。
jquery下拉框选择select美化插件FancySelect.js.zip
07-05
在这个场景中，"jquery下拉框选择select美化插件FancySelect.js.zip" 提供了一个解决方案，专门针对HTML中的`<select>`元素进行美化，提升网页的视觉体验。 `<select>`是HTML中用于创建下拉列表的标签，但其默认...
SELECT下拉菜单美化
06-09
本项目名为"SELECT下拉菜单美化"，旨在提供一套优雅的解决方案，让`SELECT`下拉菜单在保持功能完整性的前提下，外观更加精致。这个美化方案特别适用于语言切换或网站主题色调选择等场景，让用户在选择过程中感受到...
实用select下拉框美化jquery插件
12-11
这是一款实用的select下拉框美化jquery插件。该select下拉框的原理是将select标签隐藏，并按照select标签用div和list绘制一个控件，将用户对div的操作映射到select上。css文件可以根据不同需求修改。
select多选下拉框美化
08-19
jq+css实现的select多选下拉框美化
css实现表单Select样式美化
05-19
css实现表单Select样式美化css实现表单Select样式美化
select下拉选择框美化实现代码(js+css+图片)
10-29
图片+JavaScript+CSS三者共同打造超漂亮的select下拉选择框，更看重外观的朋友将会对本代码非常喜欢。
一款很酷的li列表美化实例
06-21
一款很酷的li列表美化实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
纯CSS select 下拉框美化
The Home Of Salt Fish
05-31 8294
<style> body { font-size: 20px; color: #090; background-color: #eee; text-align: center; } .select { display: inline-block; width: 300px; position: relative; vertical-align: middle; padding: 0; overflow: hidden; background-co.
jQuery select美化插件制作select样式美化代码
weixin_42029095的博客
10-15 853
1 目标效果 2 div 对象 <div class="info-row-div"> <select id="roleId" name="roleId" class="super-select"> <option value="">-请选择-</opt...
JS+CSS美化的漂亮Select列表框
FerNanDo Zo专栏
10-14 2228
JS+CSS美化的漂亮Select列表框<!--body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;}#uboxstyle .select_box{width:100px;height:24px;}#macstyle .select
css美化select标签
10-23
这些引用提供了一些CSS样式，可以美化select标签的下拉框和滚动条。其中，主要是通过设置overflow-y属性来控制下拉框的滚动条，通过设置::-webkit-scrollbar相关属性来美化滚动条的样式。同时，这些样式可以通过在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值