Customize style
Refer to
this
page to learn about the Search element in pages
-
Edit your app.
- Open the builder of the required page.
- Select the required search element. The Search Configuration pane will appear from the right.
- Navigate to the Style tab on the right.
- Set the Search box shape as required: Rectangular or Rounded .
- Set the Font Family as required. Default font is selected by default. This dictates the font in which your user's input will appear in the search bar.
-
Set Column align as required. Center is selected by default. This dictates the alignment of the search box inside the search element.
-
Set the required style for the Search button . These options become available when you've selected a search element that contains the "Search" button.
- Click the B and I buttons to embolden and italicize the "Search" text inside the button
- Select the required font and background Color . By default, "Search" inside the button is in white, with a blue background.
- Set the Font size as required — specify a suitable font size or select one from the dropdown. It is set to 15px by default. This is the font size of the "Search" text inside the button.
-
Set the required style for the Search bar :
- Click the B and I buttons to embolden and italicize the user's input in the search bar, respectively.
- Select the required font and background Color . By default, your user's input will appear in black with no fill.
- Set the Font size as required — specify a suitable font size or select one from the dropdown. It is set to 15px by default. This is the font size for your user's input in the search bar.
-
Set Padding as required. This dictates the space (in pixels) between the search box and the search element's border.
- Set the search element's Background as required. You can set a background color and image.
-
When you set a background image for the search element, set the Image position , Align , and Overlay as required.
Related Topics
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Still can't find what you're looking for?
Write to us: support@zohoforms.com
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Bigin?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
Add style to gauge
Set color for the gauge elements Add style to the gauge elements Set color for the gauge elements Edit your app. Select the required page from the accordion menu on the top-left corner, or from the application preview in the middle. You'll be taken ...Add style to panel
You can add custom styles to every panel. Styling options for a panel include adding background color and panel content alignment. To add style to a panel Click to select a panel that you want to customize. Click the Configure option in the toolbar ...Add style to button
You can add custom styles to every button. Styling options for a button include customizing the label, adding color to the button and the text inside it, and specifying margin dimensions around the button. To add style to a button in your page, Edit ...Install custom app from Marketplace and customize
Requirement Customize the Point of Sale application installed from Marketplace to include a membership module. Use case A retail store requires a regular point of sale application with certain store-specific personalizations to ease their checkout ...Add style to text in a panel
Customize the text displayed in a panel by adding fundamental styling to them. You can style a panel's text by adding details to its font family, size, colour and more. To add style to text in a panel Double click the panel to add style to the text ...