html搜索框美化,免费的ai生成视频工具,ai少女视频

🗣 Wd提问

html搜索框美化

🤖 Ai回答

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

html
<!DOCTYPE html
<html lang=en
<head
<meta charset=UTF8
<meta name=viewport content=width=devicewidth, initialscale=1.0
<title美化搜索框</title
<style
body {
fontfamily: Arial, sansserif;
display: flex;
justifycontent: center;
alignitems: center;
height: 100vh;
backgroundcolor: f0f0f0;
}

.searchcontainer {
position: relative;
}

.searchbox {
width: 300px;
padding: 10px 40px 10px 20px;
border: none;
borderradius: 25px;
fontsize: 16px;
outline: none;
boxshadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.searchbox:focus {
width: 350px;
}

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

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

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