搜索内联

请看下图，看看内联搜索的样子:

要添加这个元素，只需搜索“搜索”并选择搜索内联．

搜索设置

搜索内联字段设置的基本设置包括设置而且内容字段组。

设置

Setup包含以下字段:

• 基本字体大小——这是字体大小的基础。更改此参数将改变*的大小提交(放大镜图标)输入文本和清晰的图标。例如，我将该字段的值更改为2他们你会看到一切都变了。

• 宽度-显然决定了搜索表单的范围。你可以定下来像素，百分比，REM而且新兴市场．
• 高度-这是你设置形状的高度。
• 最大宽度-窗体的最大宽度。这对于响应性很有用。
• 背景-这里有两个颜色选择器。首先，左边是默认颜色*基地．这是默认的背景色。第二，交互颜色是当光标在窗体中时的背景色。

注意:当我使用“形式”这个术语时，我指的是:

内容

• 占位符
• 输入位置
• 提交位置
• 明确的位置

搜索设计设置

保证金

边境

边界半径

盒阴影

搜索输入设置

输入保证金，输入文本格式而且输入方式所有这些都允许您配置输入文本框。

想让文本全大写?可以使用文本装饰设置下输入文本样式．想要更改字体家族和字体大小?这很简单，去输入文本格式在那里做改变。可能性几乎是无限的。

搜索提交设置

想要更改提交按钮的大小、颜色和边距?像下面这个?

然后设置如提交设置，提交保证金，提交边境，提交边界半径而且提交框阴影都有空。

搜索清除图标设置

就像可以配置搜索表单、提交按钮和搜索输入文本框的设计一样，也可以配置清晰的图标．

下面是一个配置好的清除图标的例子:

可用的设置如下:设置(这里你可以设置大小，颜色，背景色等)，保证金，边界，边界半径而且盒阴影．

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看搜索内联元素的现场演示，请单击在这里．

总结

现在您知道了如何使用Search Inline Element以及如何配置它的选项来实现您想要的外观。