Select下拉选择框的美化
1.1 CSS修改select下拉框的默认样式
1、原理
将浏览器默认的下拉框样式清除，然后自定义样式，再附一张小箭头图片或者使用三角的实体字符即可。
2、用法
select {
/*将默认的select选择框样式清除，IE8/9并不支持 appearance:none CSS属性*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display: none;}
注意：上述方式不能兼容IE9及以下版本。
3、兼容低版本IE浏览器
为select添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见（overflow: hidden；），即可覆盖小箭头。
此方法的缺陷是并不能隐藏下拉框的显示，下拉选项的宽度会比他的父容器宽，看上去有点不协调。
4、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display:none;}
select#selectTravelCity{
width:185px;
padding:0.2em 0.4em;
cursor:pointer;
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border:1px solid #94c1e7;
/*将默认的select选择框样式清除*/
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
select#selectPointOfInterest{ width:185px; padding:0.2em 0.4em; border:1px solid #94c1e7; cursor:pointer; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
label#lblSelect{ position: relative; display: inline-block; }
label#lblSelect::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:20px; line-height:28px; text-align:center; background:#94c1e7; color:#2984ce; pointer-events:none; }
label.select-container{ width: 160px; overflow: hidden; }
</style>
</head>
<body>
<select id="selectTravelCity">
<option>去掉select原有样式</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
</select>
<br><br>
<label id="lblSelect">
<select id="selectPointOfInterest">
<option>定义新样式</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
<br><br>
<label id="lblSelect" class="select-container">
<select id="selectPointOfInterest">
<option>定义新样式</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>
</html>
1.2利用js自定义select显示部分，覆盖select原有显示部分。
1、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
.ui-select{ position: relative; height:28px; padding:0 30px; line-height:28px; color:#fff; background-color:#ECAFB4; }
.ui-select::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:20px; line-height:28px; text-align:center; background-color:#ECAFB4; color:#fff; pointer-events:none; }
select{ width:100%; height:28px; padding:0 23px; font-size: 16px; line-height:28px; opacity: 0; position: absolute; top:0; left:0; }
</style>
</head>
<body>
<div class="ui-select">
<span>使用现金券</span>
<select name="" id="">
<option value="10元现金券">10元现金券</option>
<option value="20元现金券">20元现金券</option>
<option value="30元现金券">30元现金券</option>
<option value="40元现金券">40元现金券</option>
</select>
</div>
<!--[if !IE]><!-->
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
<script>
$(".ui-select select").change(function(){
$(this).prev("span").html($(this).find("option:selected").val());
})
</script>
</body>
</html>
1.3利用js完全自定义select下拉选择
1、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
.show-part{ position: relative; height:28px; }
.show-part::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:30px; line-height:28px; text-align:center; pointer-events:none; }
.select-input{ width: 100%; height: 100%; padding: 2px 10px; border:1px solid #CCC; box-sizing: border-box; line-height: 24px; cursor: pointer; }
ul{ height:92px; margin:0; padding:0; border:1px solid #ccc; border-top:0px; list-style:none; overflow:scroll; overflow-x:hidden; }
ul li{ height:24px; padding:0 10px; font-size:14px; line-height:24px; cursor:pointer; }
ul .selected{ background-color:#BC0902; color:#FFF; }
</style>
</head>
<body>
<div class="show-part">
<input class="select-input" type="text" value="请选择分类" readonly>
</div>
<ul style="display: none;">
<li class="selected">请选择分类</li>
<li title="水果类">水果类</li>
<li title="蔬菜类">蔬菜类</li>
<li title="瓜果类">瓜果类</li>
<li title="干货类">干货类</li>
<li title="生鲜类">生鲜类</li>
<li title="饮品类">饮品类</li>
</ul>
<!--[if !IE]><!-->
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
<script>
$(document).ready(function(){
$(".select-input").on("click",function(){
$("ul").fadeIn(800);
});
$("ul li").hover(function(){
$(this).addClass("selected").siblings().removeClass("selected");
}).on("mouseup",function(){
$("ul").fadeOut();
var txt = $(this).html();
var input = document.getElementsByTagName("input");
input[0].value = txt;
});
});
</script>
</body>
</html>
分享到：
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4217html框架之iframe和frame及f ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 7018Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1661Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1697Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1182input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3483html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 944HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1688html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 620html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1191html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 966Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6290HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16161div元素按比例缩放的实现方法 某些场景下，窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1171HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2415HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1101RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 660Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 808DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1484HTML引入CSS样式的方式详解 1.1内联属性（Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4942设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
**jQuery和CSS3超赞Select下拉列表框美化插件详解** 在网页设计中，Select元素通常是用来创建下拉选择菜单的，但其默认样式在许多浏览器中并不统一，有时显得较为简陋。为了提升用户体验和界面美观度，开发者经常...
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造，并通过Tether插件来进行下拉框的定位。
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造，并通过Tether插件来进行下拉框的定位。
带select下拉选择框美化的jQuery省市区三级联动插件，网络上很多城市三级联动选择插件，但是 大部分是采用传统的select下拉框选择，本插件利用ul模拟美化select选择框，界面还是很不错的 最终选择的值会赋值到隐藏...
此项目使用jQuery库来实现这一功能，通过美化select下拉选择框，提供更好的用户体验。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。 在“jQuery实现的带select下拉选择...
在网页设计中，"jquery+css3美化select下拉列表框特效"是一个常见的需求，它旨在提升用户体验，使传统的HTML `<select>` 元素看起来更加现代和吸引人。本项目结合了JavaScript库jQuery和CSS3的新特性，为下拉列表框...
本资源"select下拉菜单美化.rar"可能包含了一套用于改善默认select菜单外观的JavaScript库或者CSS样式集，旨在提供更加美观、交互性更强的下拉选择体验。 通常，这种美化方法会涉及到以下几个关键知识点： 1. **...
select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框，并且转换后的下拉选择框带搜索功能，可通过AJAX获取数据，带多种主题，还可以自定义主题等。
综上所述，本文所介绍的select下拉选择框美化实现代码，通过巧妙的结合了JavaScript的动态交互功能、CSS的样式布局能力以及图片素材的视觉吸引力，共同构建了一个外观精美且功能完善的下拉选择框。这种做法不仅增强...
在现代网页设计中，select下拉列表是实现用户交互的一项基本元素，但在不同的浏览器中，其样式表现差异较大，且在自定义样式方面存在限制，尤其是无法完全通过CSS控制其外观。随着Web标准的推进，浏览器厂商对HTML...
综上所述，通过结合JavaScript和CSS，我们可以对`select`下拉列表选择框进行深度美化，包括调整基本样式、添加自定义图片，甚至实现复杂的交互效果。在`select美化选择框.htm`这个示例文件中，我们可以看到一个完整...
"手动样式仿select下拉列表框"就是一个这样的实践，它通过CSS和JavaScript等技术，使得原本样式单一的SELECT元素变得更为美观、交互性强。 在传统的HTML中，SELECT元素用于创建下拉列表，但其默认样式受到浏览器的...
之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件，比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于...
在网页设计中，"select下拉菜单美化"是一个常见的需求，因为浏览器默认的下拉菜单样式通常比较单调，无法满足设计师对于美观和品牌一致性的要求。本文将深入探讨如何通过CSS和JavaScript技术来重新定义和美化select...
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造，并通过Tether插件来进行下拉框的定位。 Tether Tether 是一...
通过这种方式，我们可以利用Tether库和JavaScript以及CSS，将原本单调的select元素转换为具有美观特效的下拉选择框。同时，由于提供了三种皮肤主题，我们可以轻松地将其融入到各种网站设计中，提升用户体验。 总结...
Multi-Column-Select是一款多列网格样式下拉列表框美化jQuery插件。通过该插件可以将下拉列表转换为多列的网格选项布局。它支持下拉列表的单选和多选，在鼠标滑过列表选项时还带有一些有趣的动画特效。
"Pickout" 是一个专门用于美化HTML下拉选择框（`<select>`元素）的JavaScript插件。"纯JS"表明这个插件不依赖任何外部库，如jQuery，完全基于原生JavaScript编写，这意味着它具有更高的性能和更小的文件体积。"炫酷...