URL Styling
The Uniform Resource Locator (URL) element is used for collecting web page addresses.
It has a built in validation rule that checks the syntax of an entered string and prevents a user from entering an invalid URL.
This element can be broken down into several parts, which can be styled individually, for example, the label, font, size, and color. This element can be edited on both the Project Style Level and Element Style Level.
| # | Option | Function | Available in Project or Element 
|
|---|---|---|---|
| 1 | Root | This option enables you to set general properties that affect the URL element as a whole. | 
|
| 2 | Label | The Label option allows you to control the style of the descriptive text above the URL box. For example, its font size, color, and type. |
|
| 3 | Shrink Label | You can use the Shrink Label option to control the style of the elevated label when the input label is configured as floating. The Shrink Label option is available under the Standard, Filled, and Outlined variants on the project styling properties, and is not found on the Classic and Fixed variants. |
|
| 4 | Input | The Input option allows you to style the URL Input box and the text entered in it. You can also style the prefix texts, suffix texts, and icons that could be shown before or after the text. |
|
| 5 | Messages | This option allows you to style text shown under the URL, when the input text is found to be valid or invalid. You can set the font for both messages and configure a separate color for the success and error message. These colors will also be applied to the input border and their relevant message. |
|
| 6 | Valid Icon | The Valid Icon is a simplified image used to represent input text is correct. It is a graphic symbol that can visually support and clarify your content. You can set a size, color, and stroke option for the Valid Icon. |
|
| 7 | InValid Icon | The InValid Icon is a simplified image used to represent input text is correct. It is a graphic symbol that can visually support and clarify your content. You can set a size, color, and stroke option for the InValid Icon. |
|
1. Root
The Root option enables you to set general properties that affect the URL element as a whole such as primary color, element size, position, and alignment.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Primary | The Primary color given to the URL element affects its border. |
|
| 2 | Position | You can use this option to change the URL’s location in the content area, on the x and y-axis (left/right/top/bottom). Position also allows you to make the URL float over its parent container or over the entire page. “Float over Parent” allows you to set the location of the URL within the box containing it, e.g. container or strip. “Float over Page” allows you to set the location of the URL inside of the entire page (and have it stay in the same location even when the user is scrolling up and down the screen). |
|
| 3 | Size | This option allows you to change the width and height of the URL element. |
|
| 4 | Alignment | The Alignment option allows you to set the URL’s vertical (top/middle/bottom) or horizontal position (left/center/right) in relation to its parent container (which can be a container/column/strip). It also allows you to set the position of a few elements in relation to each other. |
|
| 5 | User CSS | Cascading Style Sheets (CSS) allows a user to apply styles on a URL with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article. |
|
| 6 | Input Variant | This option allows you to choose a general look for the input from five existing variants: Standard, Filled, Outlined, Fixed, Classic. Except for the Fixed and Classic variants, the labels in all variants can be set as Floating. |
|
2. Label
The Label option allows you to control the style of the descriptive text above the URL box. For example, its font type, font size, and color.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Font | Font enables you to change the typography style, for instance, font family, weight, color, and size. |
|
| 2 | Margin | This option allows you to set the outer space between the label and the adjacent element parts. |
|
| 3 | Asterisk | This option lets you set the style of the asterisk sign (*) that appears next to the label when an element is mandatory. |
|
3. Shrink Label
You can use the Shrink Label option to control the style of the elevated label when an input label is configured as floating. The Shrink Label option is available under the Standard, Filled, and Outlined variants on the project styling properties, and is not found on the Classic and Fixed variants.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Font | This option enables you to turn on the Floating Label functionality (which is turned off by default), by switching off the “Always shrunk” checkbox. It then enables you to change the typography style of the floating label (for instance, font family, weight, color, and size) and set the Top and Left offset for the floating label. |
|
| 2 | Margin | This option allows you to set the outer space between the shrink label and the adjacent element parts. |
|
4. Input
The Input option allows you to style the URL box and the text entered in it. You can also style the prefix texts, suffix texts, and icons that can be shown before or after the text.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Input Font | You can use the Input Font option to change the typography style, for instance, font family, weight, color, and size. |
|
| 2 | Fill | This option allows you to set a background color for the Input box. You can select the color from a color pallet or specify a HEX color code. The Fill property is not available for all input variants. It can only apply to inputs in Filled or Classic variants. |
|
| 3 | Border | The Border option refers to the contour of the URL box. It allows you to make the border visible, invisible, change the width, color, corner radius, and more. The border can be styled as a whole or separated into the top, bottom, left, and right border lines. |
|
| 4 | Prefix Text Font | You can use this option to style the static text that appears before the user input text. |
|
| 5 | Prefix Icon | The Prefix Icon allows you to style the static icon that appears before the user input text. |
|
| 6 | Suffix Text Font | This option allows you to style the static text that appears after the user input text. |
|
| 7 | Suffix Icon | You can use the Suffix Icon option to style the static icon that appears after the user input text. |
|
5. Messages
This option allows you to style text shown under a URL when the input text is found to be valid or invalid. You can set the font for both messages and a separate color for success and error messages. These colors will also be applied to the input border and their relevant message.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Font | This option allows you to change the error and success message typography style, such as the font family, weight, etc. It also enables you to set a color for both these messages that will also be applied to the input border. |
|
