您的位置：首页 > Web前端 > JQuery

html 物资 jQuery下拉框select美化

2016-05-01 11:07 615 查看

实现特效：jQuery下拉框select美化，未做手机适应，引入jquery.min.js

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery下拉框select美化</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
html { box-sizing: inherit; background-color: #8e9eab; background: linear-gradient(to left, #8e9eab, #eef2f3);}
body { margin: 10% auto; font-size: 12px;}

.select { position: relative; display: block; margin: 0 auto; width: 100%; max-width: 325px; color: #cccccc; vertical-align: middle; text-align: left; user-select: none; -webkit-touch-callout: none;}
.select .placeholder { position: relative; display: block; background-color: #393d41; z-index: 1; padding: 1em; border-radius: 2px; cursor: pointer;}
.select .placeholder:hover { background: #34383c;}
.select .placeholder:after { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-family: 'FontAwesome'; content: '\f078'; z-index: 10;}
.select.is-open .placeholder:after { content: '\f077';}
.select.is-open ul { display: block;}
.select.select--white .placeholder { background: #fff; color: #999;}
.select.select--white .placeholder:hover { background: #fafafa;}
.select.select--green .placeholder { background: #5BF36E; color: #FFF;}
.select.select--green .placeholder:hover { background: #5BF36E;}
.select ul { display: none; position: absolute; overflow: hidden; width: 100%; background: #fff; border-radius: 2px; top: 100%; left: 0; list-style: none; margin: 5px 0 0 0; padding: 0; z-index: 100;}
.select ul li { display: block; text-align: left; padding: 0.8em 1em 0.8em 1em; color: #999; cursor: pointer;}
.select ul li:hover { background: #4ebbf0; color: #fff;}
</style>
</head>

<body>

<div class="select">
<span class="placeholder">请选择</span>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>雅虎</li>
<li>新浪</li>
</ul>
</div>

<br>
<div class="select select--white">
<span class="placeholder">sucaihuo</span>
<ul>
<li>代码</li>
<li>素材</li>
<li>模板</li>
<li>教程</li>
</ul>
</div> <br>
<div class="select select--green">
<span class="placeholder">性别</span>
<ul>
<li>男</li>
<li>女</li>
</ul>
</div>
<script>
$('.select').on('click', '.placeholder', function(e) {
var parent = $(this).closest('.select');
if (!parent.hasClass('is-open')) {
parent.addClass('is-open');
$('.select.is-open').not(parent).removeClass('is-open');
} else {
parent.removeClass('is-open');
}
e.stopPropagation();
}).on('click', 'ul>li', function() {
var parent = $(this).closest('.select');
parent.removeClass('is-open').find('.placeholder').text($(this).text());
});

$('body').on('click', function() {
$('.select.is-open').removeClass('is-open');
});
</script>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航