演示:
伸展式输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/1.css">
<title>Document</title>
<style>
.box {
display: inline-block;
position: relative;
width: 40px;
overflow: hidden;
text-align: right;
line-height: 40px;
border-radius: 40px;
transition: all 1.0s ease-in-out;
background-color: rgb(115, 76, 155);
height: 40px;
padding: 10px;
top: 65px;
left: 30px;
}
.box:hover {
/* 一定要加important,否则js改变宽度后,由于优先级的关系,hover的将不会生效 */
width: 200px !important;
}
.searchInput {
width: 100px;
height: 25px;
outline: 0px;
border: none;
background-color: rgb(115, 76, 155);
color: white;
margin: auto;
position: absolute;
left: 60px;
top: 20px;
}
/* 定义输入框提示文本的颜色 */
.searchInput::-webkit-input-placeholder {
color: rgb(255, 255, 255);
}
.icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url("../images/搜索小.png");
background-size: 20px 20px;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="nav">
<div class="box" id="divbox">
<label for="searchInput" class="lableicon ">
<i class="icon animated bounce"></i>
</label>
<input type="text" class="searchInput" name="searchInput" placeholder="搜索" id="search">
</div>
<div class="nav_li">
<ul class="nav_ul">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
<script>
document.getElementById("search").oninput = function () {
if (document.getElementById("search").value != "") {
document.getElementById("divbox").style.width = "200px";
console.log(document.getElementById("search").value);
} else {
document.getElementById("divbox").style.width = "40px";
}
}
</script>
</body>
</html>