Material Design 是 Google 推出的一种全新的设计语言，它以简洁、直观、现代化的设计风格著称，受到了广泛的应用和赞誉。在前端开发领域，Material Design 风格也被广泛运用于各种网站和应用。其中，搜索框是网站和应用中经常出现的组件之一，接下来我们将介绍如何使用 Material Design 风格的搜索框，并且给出一些样式修改的方法。
Material Design 风格的搜索框的基本样式
Material Design 风格的搜索框有以下特点：
- 搜索框的颜色为白色或淡灰色，边框为深灰色或黑色。
- 搜索框的圆角为 4px 左右。
- 搜索框的高度和宽度比较宽。
- 搜索框两侧带有放大镜图标和清除文本的小叉形图标。
以下是 Material Design 风格的搜索框的示例代码：
<div class="search-box"> <input type="text" placeholder="搜索"> <i class="material-icons search-icon">search</i> <i class="material-icons clear-icon">clear</i> </div>
其中，search-icon 和 clear-icon 分别代表放大镜图标和清除文本的小叉形图标。class="material-icons" 表示我们要使用 Material Design 风格的图标。同时，我们还需要写一些 CSS 代码来修改这个搜索框的样式：
-- -------------------- ---- ------- ----------- - --------- --------- ------- ----- ------ ----- ---------- ------ ------- - ----- - ----------- ------------------ - ------ --------- - ------ ------- ----- -------- --- ----- -------------- ---- ------- --- ----- ----- ---------- ----- - ------------- ----------- - --------- --------- ---- ---- ---------- ----------------- ---------- ----- ------ ----- ------- -------- - ------------ - ----- ---- - ----------- - ------ ---- -
这些 CSS 代码可以使搜索框的样式变成 Material Design 风格的样式。
修改搜索框的颜色
为了改变搜索框的颜色，我们需要添加 background-color 样式规则。例如，要改变搜索框的背景颜色为蓝色，可以添加以下 CSS 代码：
.search-box input[type="text"] {
background-color: blue;
}这时，你会发现搜索框变成了蓝色。
修改搜索框的圆角
为了改变搜索框的圆角，我们需要添加 border-radius 样式规则。例如，要将搜索框的圆角变成 10px，可以添加以下 CSS 代码：
.search-box input[type="text"] {
border-radius: 10px;
}这时，你会发现搜索框的圆角已经变成了 10px。
修改搜索框的大小
为了改变搜索框的大小，我们需要修改它的高度和宽度。例如，要将搜索框的宽度变成 80%，可以添加以下 CSS 代码：
.search-box input[type="text"] {
width: 80%;
}这时，你会发现搜索框的宽度已经变成了 80%。
修改搜索框的图标
为了改变搜索框的图标，我们需要修改 search-icon 和 clear-icon 的内容。例如，要将搜索图标变成放大镜图标，可以将 search-icon 的内容改为 "search"，可以添加以下 CSS 代码：
.search-icon::before {
content: "search";
}这时，你会发现搜索框的搜索图标已经变成了放大镜图标。
总结
在本文中，我们介绍了 Material Design 风格的搜索框的基本样式，并且给出了一些样式修改的方法。这些方法可以帮助你实现自己的搜索框设计，并且使搜索框更符合你的网站或应用的要求。当然，这只是搜索框样式修改的一部分，更多的修改方法可以从实践中不断探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648589d648841e98944561c4