HTML+CSS：动态搜索框
以下是一个简单的HTML和CSS代码示例，用于创建一个具有基本样式的动态搜索框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Search Box</title>
<style>
.search-container {
margin: 20px;
position: relative;
display: inline-block;
}
.search-icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: 50px;
width: 50px;
pointer-events: none;
color: #ddd;
}
.search-input {
height: 50px;
width: 200px;
padding: 0 50px 0 20px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
color: #333;
outline: none;
}
.search-input:focus {
border-color: #333;
}
</style>
</head>
<body>
<div class="search-container">
<form action="/search">
<input type="text" id="search" name="search" class="search-input" placeholder="Search...">
<i class="fa fa-search search-icon"></i>
</form>
</div>
</body>
</html>这个示例包括了一个基本的搜索框，当用户点击输入框时，输入框会有一个蓝色的边框提示用户正在输入。同时，输入框的右侧有一个放大镜图标，提供视觉提示表明这是一个搜索框。这个示例使用了Font Awesome图标库来提供图标，因此需要在HTML中引入Font Awesome库或者将图标替换为其他图标字体。
评论已关闭