How Can We Help?

Custom form styling using CSS

You are here:
< All Topics

This article is about performing advanced styling on a form. For a simpler approach, see the “Applying a theme” article.

If you feel that the standard theming options are not enough, you can use the custom HTML property of a form section to inject any kind of custom CSS. No matter which section you use for this, the CSS will be visible globally on the form.

 

You can download a form template containing the below examples here.

 

Applying custom styles using CSS might make the form unreadable, or even break some of its functions. Make sure that you know what you’re doing.

 

Example 1: Changing the background colour for text inputs

Apply the following custom HTML to a section:

<style>
#formViewerRoot .ms-TextField input {
  background: lightblue;
}
</style>

example1.designer.png

Result:

example1.png

Example 2: applying section-specific styles

Each section present in the layout has a custom unique CSS class present, that you can use for creating section-specific styles.

Syntax of such class: sf-section-[titleOfTheSectionWithoutSpaces]. For instance, a section with title “Section A” will have a “sf-section-SectionA” class present.

For instance, we can adjust the default size of a section named “Section B” using the following CSS:

<style>
.sf-section-SectionB  {
padding: 0 200px !important;
}
</style>

Result:

example2.png

Example 3: applying field-specific styles

Similar to sections, each field present in the layout also has a custom unique CSS class present.

Syntax of such class: sf-field-[internalNameOfTheField]. For instance, “Title” field will have a “sf-field-Title” class present.

The CSS below change the background colour in people pickers, and is only working on the “PersonB” field:

 

<style>
.sf-field-PersonB .ms-PickerPersona-container {
  background-color: orange; 
}
</style>

Result:

example3.png

Note that only one people picker from the last section is affected by the orange colour, due to the fact that the style has been applied using a field scope.

To make sure that your custom CSS does not break HTML elements outside of form’s layout (e.g. workflow history screen, confirmation popups, etc.), always limit your CSS selectors – either by limiting the scope to a certain section or field, or at least by making sure that it only affects child elements of an HTML node with “formViewerRoot” ID (#formViewerRoot), which is the root element of the form viewer screen.

 

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Table of Contents