select随笔
2024-09-04 15:31:40
粘贴下面代码
select 美化
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body,ul{
margin:0;
padding: 0;
background: #1D9669;
}
.content{
padding-top:5%;
}
.content .select-wrap{
width:300px;
height:40px;
font-size: 16px;
margin: 0 auto;
background: #fff;
position: relative;
}
.content .select-wrap:after{
content: '';
display: block;
width: 10px;
height: 10px;
border-left:1px #000 solid;
border-bottom:1px #000 solid;
transform: rotate(-45deg);
position: absolute;
top:11px;
right: 12px;
}
.content .select-wrap .title{
padding: 0 15px;
line-height:40px;
cursor: pointer;
}
.content .select-wrap ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow-y: auto;
top:40px;
position: absolute;
left:0;
max-height: 0;
}
.content .select-wrap ul li{
padding: 0 15px;
line-height:40px;
cursor: pointer;
}
.content .select-wrap ul li:hover{
background-color: #e0e0e0;
}
.content .select-wrap .selected{
background: #39f;
color: #fff;
}
.content .open ul{
max-height: 250px;
}
.content .open:after{
transform: rotate(-225deg);
top:18px;
transition: all .3s ease-in;
}
</style>
<script>
$(function () {
$(".select-wrap").on("click",function () {
$(this).toggleClass("open");
}); var liItem = $(".select-wrap ul li");
liItem.on("click",function () {
var $this = $(this);
liItem.removeClass("selected");
$this.addClass("selected");
$(".title").text($this.text());
$(".selected").text($this.text()).attr("data-value",$this.attr("data-value"));
})
})
</script>
<body>
<div class="content">
<div class="select-wrap">
<p class="title">请选择</p>
<ul>
<li data-value="HTML">HTML</li>
<li data-value="CSS">CSS</li>
<li data-value="JS">JS</li>
<li data-value="PHP">PHP</li>
</ul>
</div>
</div> </body>
</html>
最新文章
- iOS多线程到底不安全在哪里?
- [算法][LeetCode]Linked List Cycle &; Linked List Cycle II——单链表中的环
- fullPage 全屏滚动【上下滚动】效果
- &;,引用复制@,忽略错误提示
- 熟练掌握HDFS的Java API接口访问
- Today&#39;s interview of C#
- Grizzly开发Echoserver实战
- HDU 5424 Rikka with Graph II
- python去掉html标签
- vj1011:记忆化搜索
- SpringMVC mock测试详解
- BZOJ_3012_[Usaco2012 Dec]First!_trie树+拓扑排序
- mabytis的xml一些写法
- P进制转Q进制
- Spring Boot(十六):使用Jenkins部署Spring Boot
- 动态规划-----hdu 1024 (区间连续和)
- IE8不能保存cookie,造成response.redirect死循环的原因
- 【Linux】cat充当vi使用(特殊用法)
- Android中如何让DialogFragment全屏(DialogFragment fullscreen)
- iOS: 定义 Block