搜索栏(SearchBar) 是一个常见的界面组件，广泛应用于各种应用程序和网站中。在 Material Design 中，搜索栏通常是带有圆角的形状。这篇文章将介绍如何使用 CSS 和 HTML 实现一个圆角的搜索栏。
概览
在开始之前，让我们简要了解一下本教程中将使用的技术和工具：
- CSS3 中的圆角属性 (border-radius)
- Material Design 中的颜色和字体
- HTML5 中的表单 (form) 和输入框 (input)
我们将通过 HTML 和 CSS 来构建搜索栏，然后将其置于一个空的 Material Design 页面中。
实现方法
首先，我们需要设置一个基本的 HTML 结构。
<div class="search">
<form>
<input type="search" placeholder="Search...">
<button type="submit"><i class="material-icons">search</i></button>
</form>
</div>接下来，我们需要应用 CSS 样式来美化搜索栏。
-- -------------------- ---- ------- ------- ---- - -------- ----- -------- ----- -------------- ----- ----------- ------ ----------- - - --- ------- -- -- ----- - ------- -------------------- - ------- ----- -------- ----- ----- -- ---------- ----- -------- - ----- - ------- --------------------- - ----------- ------------ ------- ----- -------- ----- ------- -------- -------- -- ------------ ------ - --------------- - ---------- ----- ------ -------- -
通过这些 CSS 样式，我们将搜索栏的表现套入 Material Design 的基调，具有非常好的可读性和易用性。
运用效果
这个搜索栏实际上是可以工作的，它支持在 Input 框中输入任何的文字和符号进行查找。下载一些 Material Design 字体和图标，可以让你的页面更加的直观和漂亮。
对于 Material Design 中的其他组件，你可以通过相同的方法或者技巧来实现相应的效果。
其他实现方式
实现搜索栏有很多种方法，除了本教程提供的一种，还有一些其他的方法可以实现。
例如使用 SVG 来画一个搜索栏，也可以使用 JavaScript 来制作 SearchBar。然而， CSS + HTML 的方法是最为基础和简单的一种，也是最为常用的一种实现方式。
结论
在本教程中，我们学习了如何使用 CSS 和 HTML 实现一个圆角的搜索栏。这个搜索栏的表现优美且易用，非常适合在 Material Design 网站和应用程序中使用。
这个示例可以提高在极客时间学到的其他前端组件和知识的理解。现在是你自己实现你的 SearchBar 了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f34bc5e1e8e99bfaf59a39