两套不同方式实现下拉列表select的样式修改

2018年06月08日

阅读:418

对于做前端或者草根站长来说,最讨厌的莫过于使用select做下拉框。因为select样式很难修改,为了这点小事耗费很大精力很不值得,下面开创者小编针对众多用户的需求专门做了两套不同的select美化案例,每种都是能满足您的要求,功能齐全、样式美观。让css美化不在成为难题,以此锦献给那些苦苦奋斗在第一线的开发者们。

一、用JS实现下拉列表,来替换原始的select下拉列表

使用JS实现的效果

html代码:

<div class="datepicker">
	<div class="select_year">
		<div>
			<em class="em_year">2018年</em>
		</div>
		<ul class="ul_selectYear">
			<li data-val="2018">2018年</li>
			<li data-val="2017">2017年</li>
			<li data-val="2016">2016年</li>
			<li data-val="2015">2015年</li>
			<li data-val="2014">2014年</li>
			<li data-val="2013">2013年</li>
			<li data-val="2012">2012年</li>
			<li data-val="2011">2011年</li>
			<li data-val="2010">2010年</li>
		</ul>
	</div>
	<div class="select_month">
		<div>
			<em class="em_month">6月</em>
		</div>
		<ul class="ul_selectMonth">
			<li data-val="1">1月</li>
			<li data-val="2">2月</li>
			<li data-val="3">3月</li>
			<li data-val="4">4月</li>
			<li data-val="5">5月</li>
			<li data-val="6">6月</li>
			<li data-val="7">7月</li>
			<li data-val="8">8月</li>
			<li data-val="9">9月</li>
			<li data-val="10">10月</li>
			<li data-val="11">11月</li>
			<li data-val="12">12月</li>
		</ul>
	</div>
</div>

css代码:

.datepicker {
	font-family: "Microsoft Yahei",sans-serif,"\5B8B\4F53";
}
.select_year {
	position: relative;
	display: inline-block;
	cursor: pointer;
	float: left;
	margin-left: 40px;
}
.select_year>div {
	height: 30px;
	line-height: 30px;
	border: 1px solid #d3dcdd;
	background-color: #fff;
	padding: 0 0 0 8px;
	position: relative;
	z-index: 5;
}
.select_year em {
	height: 30px;
	display: block;
	background: url(images/select-arr-default.gif) no-repeat right 0;
	font-style: normal;
	color: #4b555b;
	padding-right: 28px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ul_selectYear {
	height: 200px;
	z-index: 4;
	width: 88px;
	position: absolute;
	left: 0;
	top: 0px;
	background: #fff;
	border: 1px solid #bdc3c7;
	border-top: none;
	padding: 0px;
	overflow-y: auto;
	display: none;
	padding-top: 18px;
	-webkit-box-shadow: 1px 1px 2px #eee;
	box-shadow: 1px 1px 2px #eee;
}
.select_month {
	position: relative;
	display: inline-block;
	cursor: pointer;
	float: left;
	margin-left: 8px;
}
.select_month>div {
	height: 30px;
	line-height: 30px;
	width: 70px;
	border: 1px solid #d3dcdd;
	background-color: #fff;
	padding: 0 0 0 14px;
	position: relative;
	z-index: 1002;
	position: relative;
	display: inline-block;
	cursor: pointer;
	float: left;
	margin-right: 10px;
}
.select_month em {
	height: 30px;
	display: block;
	background: url(images/select-arr-default.gif) no-repeat right 0;
	font-style: normal;
	color: #4b555b;
	padding-right: 28px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ul_selectMonth {
	height: 200px;
	z-index: 11;
	width: 84px;
	position: absolute;
	left: 0;
	top: 0px;
	background: #fff;
	border: 1px solid #bdc3c7;
	border-top: none;
	padding: 0px;
	overflow: hidden;
	overflow-y: auto;
	display: none;
	padding-top: 18px;
	-webkit-box-shadow: 1px 1px 2px #eee;
	box-shadow: 1px 1px 2px #eee;
}
.datepicker ul li {
	height: 20px;
	line-height: 20px;
	color: #6a7576;
	font-size: 12px;
	padding: 5px 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.datepicker ul li:hover {
	background: #666;
	color: #fff;
	cursor: pointer;
}

JS代码:

$(function () {
	// 年份选择
	$('.select_year>div').on('click',function(){
		$(this).parents('.select_year').find('ul').toggle();
	});

	// 月份选择
	$('.select_month>div').on('click',function(){
		$(this).parents('.select_month').find('ul').toggle();
	});

	// 年份确认
	$('.ul_selectYear li').on('click',function(){
		var year = $(this).attr('data-val');
		$(this).parents('div.datepicker').find('.em_year').html(year + '年');
		$(this).parents('div.datepicker').find('.select_year>div').attr('data-value',year);
		$('ul').hide();
	});

	// 月份确认
	$('.ul_selectMonth li').on('click',function(){
		var month = $(this).attr('data-val');
		var datepicker = $(this).parents('div.datepicker');
		datepicker.find('.em_month').html(month + '月');
		datepicker.find('.select_month>div').attr('data-value',month);
		$('ul').hide();
	});
});

注意:不要忘记引用jQuery库

二、基于原始的select做默认样式修改,这种方式更简单

基于默认样式修改CSS后效果

html代码:

<div class="datepicker default_select">
	<select class="default_year">
		<option value="2018">2018年</option>
		<option value="2017">2017年</option>
		<option value="2016">2016年</option>
		<option value="2015">2015年</option>
		<option value="2014">2014年</option>
		<option value="2013">2013年</option>
		<option value="2012">2012年</option>
		<option value="2011">2011年</option>
		<option value="2010">2010年</option>
	</select>
	<select class="default_month">
		<option value="2018">6月</option>
		<option>2月</option>
		<option>3月</option>
		<option>4月</option>
		<option>5月</option>
		<option>6月</option>
		<option>7月</option>
		<option>8月</option>
		<option>9月</option>
		<option>10月</option>
		<option>11月</option>
		<option>12月</option>
	</select>
</div>

CSS代码:

.datepicker {
	font-family: "Microsoft Yahei",sans-serif,"\5B8B\4F53";
}
select {
	border: none;
	width: 100px;
	display: inline-block;
	height: 33px;
	line-height: 33px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 10px;
	border: 1px solid #d3dcdd;
	color: #4b555b;
	outline: none;
	background: url(images/select-arr-default.gif) no-repeat right 0;
	font-size:15px;
}

现把源码地址附上,免费下载地址:下拉列表select的样式美化案例,对了,还有这个下拉的小图标!

下拉箭头图标

别逗了好么

努力每一天,奋斗为明天。

文章 981 作品 25,341

热门作品

文章推荐

猜你喜欢

榜上有名

广告