Work with Stylesheets and Styling

Using stylesheets and styling, you can customize the appearance of your web form. A stylesheet applies to the entire form. Manage and control the appearance of your web form by applying an available stylesheet to the form or importing one. Styling enables you to change a selected control’s appearance. Use styling to define display-specific properties of a currently selected control in your web form.

Note:

Styling applied to an individual control will override the styles applied to the control by the stylesheet.

Changing a Form’s Stylesheet

To change a form’s stylesheet:

  1. In the Properties pane, go to Stylesheet and click the Lookup stylesheet icon.

    The CSS browser pane opens displaying all the available stylesheets.

  2. Select the stylesheet that you want to apply. The selected stylesheet will be applied to your web form.

  3. Optionally, import a stylesheet. Click Upload. The File Open dialog box opens.

    Select the stylesheet you want to import from your local machine and click Open. The selected stylesheet will get imported and you can apply it to your form.

    Note:

    The imported stylesheet will be available in the CSS browser and can be applied to other forms.
  4. Preview your form with the selected stylesheet applied to it by selecting the Form tab in the Preview pane. Select the CSS tab to preview the styles available in the selected stylesheet. Want to know how to customize each control using a style sheet? See Customizing Web Forms Using CSS.

Changing the Style of a Form’s Control

To change the styling of a control:
  1. Select the control for which you want to change the styling. The Properties pane changes and displays the General and Styling tabs.
  2. Select the Styling tab. You can see a number of styling options displayed for that particular control.
  3. Select the styling property you want to apply to your control and specify the styling.

Styling Properties

You can change a control’s appearance by defining its styling properties on the Styling tab in the Properties pane. Use the Styling tab to define display-specific properties of the currently selected control.

The following table provides an alphabetical list of the properties available on the Styling tab.

Note:

Styling properties are control-specific. Not all of the properties listed below are available for every control.
Property Description

Automatic column size

Calculates the column size for the control based on the amount of visible controls in the row. Automatic column size is selected by default.

Note: In small devices like a phone, each control is displayed in one row when automatic column size is enabled.

You can specify absolute column sizes for different device sizes. To do this, deselect Automatic column size and enter a number from 1 to 12 in the four available options: Small, Medium, Large, and Extra large column sizes.

Background Color

Specifies the background color of the content area in a control.

Border (Color, Width, Style, Radius)

Determines the appearance of the border in the content area of your control.

  • Border Color: Defines the color of the border.

  • Border Width: Defines the width of the border. Use standard values such as 1in, 5em, or 20px.

  • Border Style: Defines the style of the border—Solid, Dotted, or Dashed.

  • Border Radius: Defines the value of rounded border corners. Use standard values such as 1in, 5em, or 20px.

Color

Specifies the color of the text in the content area of a control.

Control Alignment

Specifies the alignment (left, right, or center) of a control in the form.

Control Class Name

Allows customization when you’re using a particular Cascading Style Sheet (CSS) in the form. Apply a CSS class to the control by selecting a class name from the properties defined in the form’s selected style sheet.

Font Size

Defines the font size of the text in the content area of a control. The available values are x-small, small, normal, large, and x-large.

Height

Sets an absolute height for the control. Use standard values such as 1in, 5em, or 20px.

Label Color

Specifies the color of a control's label.

Label Size

Specifies the size of a control's label. The available values are x-small, small, normal, large, and x-large.

Note: For a Panel control, using the Standard theme overrides the value in the Label Size property.

Reset Inline Styles to Default

Discards all styling selections made on the Styling tab and restore settings to their default values.

Text Alignment

Specifies the alignment (left, right, or center) of the content in a control. This property applies to controls where the user can type in text such as the Input Text control.

Theme

Uses a CSS to define the format of a control. This property applies to Panel and Section controls.

For a Panel control:

  • Standard: Automatically increases the size of the control’s label to 24 pixels (font size) and makes the label bold (font weight). The Standard theme overrides the value in the Label Size property.

  • None: Applies no formatting to the control. None is the default value.

For a Section control:

  • Indent: Automatically indents the section. With the Indent theme, you can easily nest sections within sections.

  • None: Applies no formatting to the control. None is the default value.

Width

Sets an absolute width for the control. Use standard values such as 5in, 20px, or 5%.

Customize Web Forms Using CSS

Use cascading style sheets (CSS) to customize the look and feel of your web form elements. Modify visual attributes, such as color, font, or margin, of an element using a custom CSS code.

You can also apply basic styling to form elements using properties available in the forms editor. See Styling Properties. However, styling options available through CSS are far more extensive and specific. The following topics describe all form elements and their corresponding CSS selectors. You can style each of these selectors by modifying several properties, such as color, font, or alignment.

Topics:

Note:

This section assumes basic working knowledge of CSS.

Style the Form Container

You can style properties that apply to the entire form, such as background or border, using selectors corresponding to the form container.

The following figure shows a sample form container with all its selectors noted:


Description of css-form-container.png follows
Description of the illustration css-form-container.png
No. Selector Name Description Sample CSS Code

1

.canvas

This selector corresponds to the outermost container of a form. Use this selector to style properties like form border, padding, and so on.

.canvas { border: 5px solid #F6DDCC;}

2

.canvas__content

Use this selector to style borders and backgrounds for the content area of a form. If you have modified the styling properties of a form through the Properties pane, those styles (backgrounds or borders) are applied to this selector.

Tip: To override the applied styles, use !important in your CSS code.

.canvas__content { background: #D7DBDD !important; border: 1px solid #D35400 !important; }

3

.row-control

Use this selector to identify a row in a form.

.row-control { border-bottom: 1px solid #D35400; }

4

.canvas__footer

Use this selector to specify footer for a form.

.canvas__footer { display: block; background: #5D6D7E; height: 10px; }

5

.canvas__header

Use this selector to specify header for a form.

Note: Set the display property to block to make headers and footers visible.

.canvas__header { display: block; background: #5D6D7E; height: 20px; }

Style Form Controls

You can style different components of a specific control using corresponding CSS selectors.

The best practice to styling a control is to define a control class name for it. See Styling Properties. The control class name serves to identify the control in the CSS file, and you can use this name as a class name and modify the control’s selectors within that class. See Control Styling Example Using CSS.

The following table lists all customizable controls and associated selectors that you can style using CSS.

UI Control Selectors Description

Label (Corresponds to the title or label of all controls within a form)

.oj-label label

Specify a style for the label.

.oj-label-required-icon

Specify a style for the Required icon. You can apply properties like color, margin, padding, and so on.

.oj-label-required-icon:before

Specify a new signifier instead of the default Required signifier, asterisks (*).

.oj-label-help-icon

Specify a style for the Help icon.

.oj-label-help-icon:before

Specify a new signifier instead of the default Help icon/signifier.

Validation Message

.oj-messaging-inline-container .oj-message.oj-message-error

Specify a style for the Validation Message container.

.oj-message-error-icon

Specify a style for the Validation Error Icon container.

.oj-message-error-icon::before

Specify a new signifier instead of the default Error icon/signifier.

.oj-message-content

Specify a style for the validation message content.

.oj-message-summary

Specify a style for the validation message title.

.oj-message-detail 

Specify a style for the validation message detail.

InputText

.oj-inputtext-input

Specify a style for the Input Text container.

.oj-inputtext.oj-invalid input 

Specify a style for the Input Text container when the input is invalid.

.oj-inputtext input[disabled]

Specify a style for the Input Text container when the control is disabled.

.oj-inputtext input[readonly]

Specify a style for the Input Text container when the control is read-only.

TextArea

.oj-textarea textarea

Specify a style for the Text Area container.

.oj-textarea.oj-invalid textarea

Specify a style for the Text Area container when the input is invalid.

.oj-textarea textarea[disabled]

Specify a style for the Text Area container when the control is disabled.

.oj-textarea textarea[readonly] 

Specify a style for the Text Area container when the control is read-only.

Button

.button-control.oj-button 

Specify a style for the Button control.

.button-control.oj-button[disabled]

Specify a style for the button when it is disabled.

.button-control.oj-button .oj-button-text 

Specify a style for the button text.

.button-control.oj-button.oj-hover

Specify a style for the button on hover (when you mouse over the button).

.button-control.oj-button.oj-active 

Specify a style for the button when it is active.

.button-control.oj-button.oj-focus

Specify a style for the button when it is focused.

Select

.oj-select

Specify a style for the Select container.

.oj-select .oj-select-choice

Specify a style for the selected input.

.oj-select.oj-invalid .oj-select-choice

Specify a style for the invalid select input.

.oj-select.oj-disabled .oj-select-choice

Specify a style for the disabled select input.

.oj-select-open-icon

Specify a style for the Drop-Down Icon container.

.oj-select-open-icon:before

Specify a new signifier instead of the default Drop-Down icon/signifier.

.oj-select-choices

Specify a style for the Select container when multiple selection is enabled.

.oj-select-multi .oj-select-selected-choice

Specify a style for selected options when multiple selection is enabled.

.oj-select-multi .oj-select-selected-choice-label

Specify a style for the selected option label.

.oj-select-multi .oj-select-clear-entry:before

Specify a new signifier instead of the default Remove icon/signifier on the selected options.

Identify Browser

.oj-identity

Specify a style for the Identity container.

.oj-identity-select

Specify a style for the identity input.

.oj-identity.oj-invalid .oj-select-choice

Specify a style for the invalid identity input.

oj-identity.oj-disabled .oj-select-choice

Specify a style for the identity input when the control is disabled.

.oj-select-open-icon

Specify a style for the Drop-Down Icon container.

.oj-select-open-icon:before

Specify a new signifier instead of the default Drop-Down icon/signifier.

.oj-select-choices

Specify a style for the Identity container when multiple selection is enabled.

.oj-select-multi .oj-select-selected-choice

Specify a style for selected options when multiple selection is enabled.

.oj-select-multi .oj-select-selected-choice-label

Specify a style for the selected option label.

.oj-select-multi .oj-select-clear-entry:before

Specify a new signifier instead of the default Remove icon/signifier on the selected options.

Checklist and Checkbox

.oj-checkboxset

Specify a style for the control container.

.oj-choice-row

Specify a style for each check option.

.oj-choice-row input

Specify a style for the check boxes in each row.

.oj-choice-row label

Specify a style for the labels in each row.

.oj-checkboxset.oj-invalid .oj-checkbox:not(.oj-disabled)

Specify a style for the invalid option.

.oj-choice-row input[disabled]

Specify a style for the disabled option.

.oj-choice-row-inline

Specify a style for inline options.

Radio Button

.oj-radioset

Specify a style for the control container.

.oj-choice-row

Specify a style for each option.

.oj-choice-row input

Specify a style for the radio button in each row.

.oj-choice-row label

Specify a style for the labels in each row.

.oj-radioset.oj-invalid .oj-radio:not(.oj-disabled)

Specify a style for the invalid option.

.oj-choice-row input[disabled]

Specify a style for the disabled option.

.oj-choice-row-inline

Specify a style for inline options.

Number

.oj-inputnumber-wrapper

Specify a style for the Number container.

.oj-inputnumber input

Specify a style for the number input.

.oj-inputnumber.oj-invalid input 

Specify a style for the invalid number input.

.oj-inputnumber input[disabled]

Specify a style for the number input when the control is disabled.

.oj-inputnumber input[readonly]

Specify a style for the number input when the control is read-only.

Date Time

.oj-inputdatetime-input-container

Specify a style for the entire Date Time control container.

.oj-inputdatetime-input-container input

Specify a style for the input area of the Date Time control.

.oj-inputdatetime-input-container input[disabled]

Specify a style for the Date Time control when it is disabled.

.oj-inputdatetime-input-container input[readonly]

Specify a style for the Date Time control when it is read-only.

.oj-inputdatetime-input-trigger

Specify a style for the Calendar and Time icons container.

.oj-inputdatetime-calendar-icon

Specify a style for the Calendar icon.

.oj-inputdatetime-calendar-icon:before

Specify a new signifier instead of the default Calendar icon/signifier.

.oj-inputdatetime-time-icon

Specify a style for the Time icon.

.oj-inputdatetime-time-icon:before

Specify a new signifier instead of the default Time icon/signifier.

Date

.oj-inputdatetime-date-only

Use this selector before the properties below to apply styling specific to the Date control.

.oj-inputdatetime-input-container

Specify a style for the entire Date control container.

.oj-inputdatetime-input-container input

Specify a style for the input area of the Date control.

.oj-inputdatetime-input-container input[disabled]

Specify a style for the Date control when it is disabled.

.oj-inputdatetime-input-container input[readonly]

Specify a style for the Date control when it is read-only.

.oj-inputdatetime-input-trigger

Specify a style for the Calendar icon container.

.oj-inputdatetime-calendar-icon

Specify a style for the Calendar icon.

.oj-inputdatetime-calendar-icon:before

Specify a new signifier instead of the default Calendar icon/signifier.

Time

.oj-inputdatetime-time-only

Use this selector before the properties below to apply styling specific to the Time control.

.oj-inputdatetime-input-container

Specify a style for the entire Time control container.

.oj-inputdatetime-input-container input

Specify a style for the input area of the Time control.

.oj-inputdatetime-input-container input[disabled]

Specify a style for the Time control when it is disabled.

.oj-inputdatetime-input-container input[readonly]

Specify a style for the Time control when it is read-only.

.oj-inputdatetime-input-trigger

Specify a style for the Time icon container.

.oj-inputdatetime-time-icon

Specify a style for the Time icon.

oj-inputdatetime-time-icon:before

Specify a new signifier instead of the default Time icon/signifier.

Email

.oj-inputtext-input

Specify a style for the input container.

.oj-inputtext.oj-invalid input 

Specify a style for the input container when the input is invalid.

.oj-inputtext input[disabled]

Specify a style for the input container when the control is disabled.

.oj-inputtext input[readonly]

Specify a style for the input container when the control is read-only.

URL

.oj-inputtext-input

Specify a style for the input container.

.oj-inputtext.oj-invalid input 

Specify a style for the input container when the input is invalid.

.oj-inputtext input[disabled]

Specify a style for the input container when the control is disabled.

.oj-inputtext input[readonly]

Specify a style for the input container when the control is read-only.

Message

p, h1, h2, h3, h4, h5, h6

Use these selectors to style a message based on its type (p or h1 to h6). Use the control class name to make it specific.

Money

.oj-inputnumber-wrapper

Specify a style for the Money container.

.oj-inputnumber input

Specify a style for the money input.

.oj-inputnumber.oj-invalid input 

Specify a style for the invalid money input.

.oj-inputnumber input[disabled]

Specify a style for the money input when the control is disabled.

.oj-inputnumber input[readonly]

Specify a style for the money input when the control is read-only.

Phone

.oj-inputtext-input

Specify a style for the input container.

.oj-inputtext.oj-invalid input 

Specify a style for the input container when the input is invalid.

.oj-inputtext input[disabled]

Specify a style for the input container when the control is disabled.

.oj-inputtext input[readonly]

Specify a style for the input container when the control is read-only.

Image

.image-control

Specify a style for the Image container.

Video

iframe[name=Video]

Specify a style for the Video container.

Link

.anchorLink a

Specify a style for the Link container.

Panel

No particular selector

Use the control class name in the Properties pane to build a selector.

Section and Mobile Tab

.oj-collapsible-header

Specify a style for the Section Header container.

.oj-collapsible-wrapper

Specify a style for the section header content.

.oj-collapsible-header-icon.oj-collapsible-open-icon

Specify a style for the Section Open icon.

.oj-collapsible-header-icon.oj-collapsible-open-icon:before

Specify a new signifier instead of the default Open icon/signifier.

.oj-collapsible-header-icon.oj-collapsible-close-icon

Specify a style for the Section Close icon.

.oj-collapsible-header-icon.oj-collapsible-close-icon:before

Specify a new signifier instead of the default Close icon/signifier.

.oj-collapsible-header p

Specify a style for the header type: paragraph.

.oj-collapsible-header h1

.oj-collapsible-header h2

.oj-collapsible-header h3

.oj-collapsible-header h4

.oj-collapsible-header h5

.oj-collapsible-header h6

Specify a style for the header type: title1 to title6.

Tab

.tab-container

Specify a style for the Tabs container.

.oj-tabs-tab

Specify a style for the tab header.

.oj-tabs-tab.oj-selected

Specify a style for the selected tab header.

.oj-tabs-tab.oj-disabled

Specify a style for the disabled tab header.

.oj-tabs-title

Specify a style for the tab title.

.oj-tabs-panel

Specify a style for the tab content.

Table

.table-container

Specify a style for the entire Table container (including the label).

.table-control

Specify a style only for the table.

.oj-table-header

Specify a style for the table header section (thead).

.oj-table-header-row

Specify a style for the table header row, containing all table header columns (tr).

.oj-table-column-header-cell

Specify a style for the Table Column Header container (th).

.oj-table-column-header-text

Specify a style for the text in each column.

.oj-table-body

Specify a style for the table body containing all items (tbody).

.oj-table-body-row

Specify a style for each row inside the table body (tr).

.table-cell

Specify a style for a particular cell inside the body.

.table-cell.oj-selected

Specify a style for the selected cell.

button.add

Use this selector to add a button within a table.

button.delete

Use this selector to remove a button from within a table.

Repeatable Section

.repeatable-section

Specify a style for the Repeatable Section container.

button.add

Use this selector to add a button within a repeatable section.

button.delete

Use this selector to remove a button from within a repeatable section.

Control Styling Example Using CSS

Let’s apply basic styling to a control to understand the usage of control class names and selectors. The following figure shows an Input Text control with no styling applied to it:


Description of css-inputtext.png follows
Description of the illustration css-inputtext.png

To apply styling to this control through CSS:
  1. Select the control in the form canvas.
  2. In the Properties pane, select the Styling tab.
  3. In the Control Class Name field, enter a name to identify the control in the CSS file as shown in the following figure:
  4. Now, use this name in your CSS code to modify the control’s properties or selectors. The following sample code shows styling of the control’s label:
    .firstname .oj-label label { 
      font-size: 20px; 
      color: blue;
      }
      .firstname .oj-label-required-icon:before { 
      content: "#"; 
       }
  5. Upload this style sheet from the form’s Properties pane. The customized Input Text control appears as follows:
  6. Similarly, you can customize other selectors associated with this control. You can also apply more than one class names to the control. In addition, you can reuse the same class name with other controls that require similar styling.

Note:

If you do not specify a control class name in the CSS code while defining styles for a selector, the styles will apply to all controls that satisfy the selector.

Form Reference Styling

When you import a form into another form by reference, the parent form’s styling is automatically applied to the imported form. This behavior ensures that the specified style is enforced for a form, even when there are references.

If you want to retain the styling of the imported form, include the CSS code of the child into the parent form’s CSS file. Also, make sure to use the corresponding class names in the code to apply styles specifically to the controls in the imported form.

The following example shows the CSS code of an imported form (along with a control class name) added to its parent’s CSS file:

.oj-label label { 
   color: blue; 
}
 .nominee .oj-label label { 
   color: brown; 
 }

The resulting form styling appears as follows:


Description of css-form-reference.png follows
Description of the illustration css-form-reference.png

Note:

You must have added the same class name, in this case nominee, to the controls of the child form before using it in the parent form’s CSS file.

Styling for Imported Business Types

When you drag a business type from the Business Types Palette onto the canvas, a section with a set of controls is created based on the business type’s data attributes. All styles defined for the form through CSS are also applied to this auto-generated section of controls.

Manage Style Dynamically

You can manage styling of a control dynamically through the Event window. Want to know more about events? See Add Dynamic Behaviors to a Form.

Within the Event window, you can specify actions to add or remove class names to a control when a condition is fulfilled. Based on the class name assigned, the styling of the control changes during execution. To better understand dynamic styling, let us take a look at the following example.

Consider a Number control (Age) for which the allowed value is any number less than 60. Now, let us create an event to style the control based on the value entered by the user during execution.
Description of css-number.png follows
Description of the illustration css-number.png
  1. In the web forms editor, select the Age control, and locate the Events option in the General tab of the Properties pane.
  2. Click the Add icon to define an event.
    The event field changes to a drop-down menu listing event options available for the control.
  3. Select the On Change option from the menu.
  4. In the Event window, define an If condition to specify allowed values for the control as less than 60.
  5. Specify actions for Then and Else parts of the condition as shown in the following figure.
    The actions defined make sure that the appropriate class name is applied to the control based on the value entered by the user. Subsequently, the styling defined for the class name in CSS is dynamically applied to the control.
    Description of css-actions.png follows
    Description of the illustration css-actions.png
  6. In this case, you can define styling for class names in the CSS file as follows:
    .allowed .oj-inputnumber input {
    color: green; 
    }
    .notallowed .oj-inputnumber input {
    color: red; 
    }
  7. When the user enters a value into the control, the styling changes as follows:

Some Useful Styling Tips

Here are some useful tips and best practices to make forms styling through CSS easy to understand, maintain, and scale.

  • Follow a notation for control class names. There are different naming conventions, such as Block Element Modifier (BEM), that you can use to make class names informative and readable.

  • Use the !important attribute effectively. This attribute allows you to override a style that has a higher specificity or priority.

  • Use Scalable Vector Graphics (SVG) images for icons and backgrounds. SVG images scale correctly, avoiding any loss in quality when the form is rendered on different devices.

  • Avoid using properties that alter the form layout and behavior, such as float, display, flex, and so on.

  • Avoid fixed dimensions while styling controls. The layout of a form changes based on the device, and the content within it adjusts to the available space. If an input text control’s width is set to a fixed value of 400 pixels, the control may not display properly on a phone.