TOGGLE SEARCH FORM

You can customize:

  • The icon type, colour and background.
  • The text field length, direction, animation speed, background and focus colour.
  • The text size and colour.

 

OTHER EXAMPLES

Left to right

Right to left

Left to right

Right to left

/*This makes the icon background round */

.fl-builder-content .fl-module-toggle-search-form.remove-me .fa-search-icon
 {
 /*+border-radius: 100%;*/
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 -khtml-border-radius: 100%;
 border-radius: 100%;
 margin-right: 20px;
 }

/*This space between the icon and the input area */

.remove-me #inline-search, INPUT[type="search"]
 {
 margin-left: 10px;
 }
/*This adds a border to the search input when open */
.remove-me-too .inline-search-open #inline-search, INPUT[type="search"]
{
border: 1px solid #000;

}