html搜索框美化,

🗣 SL提问: html搜索框美化

✍️ Ai批改: 要美化 HTML 搜索框，可以使用 CSS 来实现。以下是一个简单的示例代码，展示如何创建一个美观的搜索框：

html
<!DOCTYPE html
<html lang=en
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title美化搜索框</title
<style
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: f0f0f0;
}

.search-container {
position: relative;
}

.search-box {
width: 300px;
padding: 10px 40px 10px 20px;
border: none;
border-radius: 25px;
font-size: 16px;
outline: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.search-box:focus {
width: 350px;
}

.search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: aaa;
}
</style
</head
<body
<div class=search-container
<input type=text class=search-box placeholder=请输入搜索内容...
<span class=search-icon🔍</span
</div
</body
</html

说明：
1、HTML 结构：使用了一个 `div` 容器来包裹搜索框和图标。
2、CSS 样式：
`.search-container`：设置为相对定位，以便于绝对定位图标。
`.search-box`：设置输入框的宽度、内边距、边框圆角、字体大小等样式，并添加了阴影效果和过渡动画。
`.search-box:focus`：当输入框获得焦点时，宽度会增加，产生扩展效果。
`.search-icon`：使用绝对定位将图标放在输入框的右侧，并居中显示。

你可以根据需要进一步调整样式，例如颜色、字体、图标等，以满足你的设计需求。