-
by 司徒正美
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>by 司徒正美</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropdown{
position: relative;
}
.dropdown div{
position: relative;
200px;
height:30px;
border:1px solid rgb(228,228,228);
overflow: hidden;
}
.dropdown div input{
200px;
height:30px;
border: 0 none;
padding-left:10px;
position: absolute;
top:0px;
left:0px;
z-index: 1;
}
.dropdown div .close{
position: absolute;
40px;
height:30px;
text-align: center;
background: rgb(240, 240 240);
border:1px solid rgb(228,228,228);
line-height: 30px;
color:rgb(228,228,228);
z-index: 10;
right:0px;
top: 0px;
}
.dropdown select{
-webkit-appearance: none;
-moz-appearance: none;
position: absolute;
border:1px solid rgb(228,228,228);
top: 30px;
left: 0px;
z-index: 0;
200px;
display: none;
}
.dropdown select:focus{
border:1px solid rgb(228,228,228);
}
.dropdown.focus select{
display: block;
z-index: 2;
}
.dropdown select option{
padding-top:5px;
200px;
height:30px;
line-height: 30px;
padding-left: 10px;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
$(".close").click(function () {
if ($(".dropdown").hasClass("focus")) {
$(".dropdown").removeClass("focus")
} else {
$(".dropdown").addClass("focus")
}
})
$(".dropdown select").change(function () {
$(".dropdown input").val($(this).val())
$(".dropdown").removeClass("focus")
})
})
</script>
</head>
<body>
<div class="dropdown">
<div><input placeholder="选择服务类型" readonly><span class="close">X</span></div>
<select multiple>
<option>1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
</select>
</div>
</body>
</html>
]]>
-
相关阅读:
Java8简单的本地缓存实现
Java堆内存详解
拖拽实现备忘：拖拽drag&拖放drop事件浅析
微信小程序下拉刷新PullDownRefresh的一些坑
ES6里let、const、var区别总结
nodejs大文件分片加密解密
node+js实现大文件分片上传
大文件上传前台分片后后台合并的问题
fs.appendFileSync使用说明，nodejs中appendFile与writeFile追加内容到文件区别
JS中的单线程与多线程、事件循环与消息队列、宏任务与微任务
-
原文地址：https://www.cnblogs.com/rubylouvre/p/4975070.html
Copyright © 2020-2023
润新知