Search Inline

Unlike the Search Modal Element that displays the search form only when the modal popup is visible, the Search Inline Element directly embeds the search form within the page.

See the image below to see how the Search Inline looks:

To add this element, simply search "Search" and select Search Inline.

Search Setup

The basic setup of settings of the Search Inline field includes the Setup and Content field groups.

Setup

Setup includes the following fields:

• Base Font Size - This is the basis of the font size. Changing this will change the size of the * Submit (the magnifying glass icon), the Input text, and the Clear icon. As an example, I changed the value for this field to 2EM and you'll see everything changed.

• Width - Obviously dictates how wide the search form will be. You can set it by pixel, percentage, REM and EM.
• Height - This is where you set how tall the form will be.
• Max Width - The maximum width of the form. This is useful for responsiveness.
• Background - There are two color pickers here. First, on the left, is the default color called * Base. This is the default background color. The second, the Interaction color is the background color of the form when the cursor is in it.

NOTE: When I use the term "form" I'm referring to this:

Content

• Placeholder
• Input Placement
• Submit Placement
• Clear Placement

Search Design Settings

Margin

Border

Border Radius

Box Shadow

Search Input Settings

Input Margin, Input Text Format and Input Style all allow you to configure the input textbox.

Want to make the text all caps? You can change it using the Text Decoration setting under Input Text Style. Want to change the Font Family and Font size? That's easy, just go to Input Text Format and make the changes there. Possibilities are virtually endless.

Search Submit Settings

Want to change the size, color and margins of the Submit button? Something like this one below?

Then the settings such as Submit Setup, Submit Margin, Submit Border, Submit Border Radius and Submit Box Shadow are available to you.

Search Clear Icon Settings

Just as you can configure the design of both the search form, submit button and search input textbox, you can also configure the Clear Icon.

Here's an example of a configured Clear Icon:

The settings available are the following: Setup (where you set the size, color, background color etc), Margin, Border, Border Radius and Box Shadow.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

• ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
• Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
• Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
• Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
• Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.

Demo

To see a live demo of the Search Inline Element click here.

Summary

Now you know how to use the Search Inline Element and how to configure its elements like the search button, the input text and clear icon to achieve the look you want.