Web实现:鼠标在搜索框悬停时有边框变色的效果,获取焦点之后出现下拉框。
HTML部分代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="index.css" type="text/css" media="all" />
</head>
<body>
<div class="search-box">
<input type="text" value="红米k20">
<div class="select-list">
<ul>
<li>小米9</li>
<li>Redmi K20 pro</li>
<li>Redmi K20 </li>
<li>Redmi note 7 Pro </li>
<li>Redmi note 7</li>
<li>小米电视4c</li>
<li>电视32英寸</li>
<li>笔记本Pro</li>
<li>小爱音箱</li>
<li>净水器</li>
</ul>
</div>
<div class="search-btn">
<span></span>
</div>
</div>
</body>
</html>
CSS部分代码:
body {
margin: 0;
background-color: #fff;
}
ul,
li {
margin: 0px;
padding: 0px;
list-style: none;
}
.search-box {
position: relative;
box-sizing: border-box;
width: 254px;
height: 42px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
}
.search-box>input {
box-sizing: border-box;
float: left;
border: none;
height: 40px;
width: 209px;
padding-left: 20px;
outline: none;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
color: #AEAEAE;
}
.search-box .search-btn {
float: right;
height: 42px;
width: 42px;
border: 1px solid #E0E0E0;
box-sizing: border-box;
margin-top: -1px;
margin-right: -1px;
padding: 12px;
}
.search-box>div>span {
display: block;
width: 16px;
height: 16px;
background: url(./images/search-normal.png) no-repeat center;
background-size: contain;
}
.search-box .select-list {
position: absolute;
top: 40px;
left: -1px;
width: 213px;
height: 282px;
background: #FFFFFF;
border: 1px solid #FD6821;
box-sizing: border-box;
display: none;
}
.search-box .select-list li {
height: 28px;
font-weight: normal;
font-size: 12px;
color: #000000;
padding-left: 15px;
line-height: 28px;
}
.search-box:hover {
border: 1px solid #FD6821;
}
.search-box:hover .search-btn {
border: 1px solid #FD6821;
}
.search-box input:focus+.select-list {
display: block;
}