Input box

< Back

Input box is the search box where you prompt your user to search. It looks similar to the image below.Here are the fields you have control over the following parameters-

  1. Height– mention a value in em,px, %, vh (example – 30px, 30em, 30%, 30vh)
  2. Padding– Inner margin of the search box. (example – 30px, 30em, 30%, 30vh)
  3. Font size– Search text font size.
  4. Color– Color of the outline (if border not specified) – can take hex values and values like red, blue etc.
  5. Border radius– will make the search box look more round.
  6. Margin– Outer margin from the nearby elements.
  7. Outline color– Color of the outline if specified.
  8. Font weight for search text and placeholder.
  9. Border.– Specify in the format solid 1px red Type of border – width of the border – color of the border
  10. Width- Width of the search box.
  11. Custom CSS- If you are a developer you can add CSS code to this section.  (For example- background:red).

Search button styling- These changes apply to the search button which looks like this

You can control the following features-

  1. Font size ( Size of the icon / text you use)
  2. Background color/image. ( you can specify a backround color or image url in this place).
  3. Border Radius
  4. Width
  5. Height
  6. Color
  7. Border
  8. Padding
  9. Margin
  10. Custom CSS.

Input box container- These changes are applied to the container of the search box.

You can control the following properties

  1. Width
  2. Padding
  3. margin
  4. Add custom CSS

Other properties-

  1. Placeholder text– Text displayed inside the search box (example- Search here)
  2. Search button icon / text– you can use font awesome icons here.