---
title: "Custom CSS"
slug: "custom-css"
updated: 2025-03-26T21:23:52Z
published: 2025-03-26T21:23:52Z
canonical: "docs.processmaker.com/custom-css"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> [!TIP]
> [**Plan Availability:**](https://www.processmaker.com/products/pricing/) ![Professional](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Standard.png)![Professional](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Professional.png)![Enterprise](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Enterprise.png)

  

## Add Custom CSS to a Screen

Use the Custom CSS mode to add custom CSS styles to a Screen. ProcessMaker Platform supports standard Cascading Style Sheet language (CSS) syntax.

**Permissions**

Your user account or group membership must have the following permissions to add custom CSS to a Screen unless your user account has the **Make this user a Super Admin** setting selected:

- Screens: Edit Screens
- Screens: View Screens

See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance.

Follow these steps to add custom CSS to a Screen:

1. [Open](/v1/docs/manage-screens#edit-a-screen) the Screen in which to add custom CSS. The Screen is in Design mode.
2. Click the **Custom CSS** button![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/8d6b2cbf-3c2e-4bc8-ade3-0d3cdc3e2125.png). The **Custom CSS** screen displays.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Custom CSS.png)
3. Enter your custom CSS syntax.
4. Optionally, reference the **CSS Selector Name** setting value for specific Screen controls to indicate that CSS styling applies to those controls. Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. The reference is case sensitive in the CSS syntax. See [Apply CSS to Specific Screen Controls](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls). Example: `[selector='Submit Form']`.
5. Address any syntax errors or changes as necessary, then click **Save**.
6. Click the **Preview** button to view your CSS syntax for your Screen in Preview mode. Custom CSS does not display in Design mode.
7. Click the **Design** button to return to Design mode, and then repeat Steps 2 through 6 as necessary.

> [!NOTE]
> Visibility Rules Override Custom CSS
> 
> When a Screen control is hidden by default using custom CSS, but a visibility rule sets it to be visible, the visibility rule takes precedence and displays the control. Use visibility rules—not custom CSS—to hide controls by default, ensuring consistent behavior and easier maintenance.
> 
> 
> 
> Need to Learn CSS?
> 
> - Start with [W3School's free CSS tutorial](https://www.w3schools.com/css/).
> - Follow a [tutorial in ProcessMaker University](https://university.processmaker.com/mod/book/view.php?id=6580).

## Customize CSS Styling Using Wildcards

Use standard Cascading Style Sheet language (CSS) syntax as well as wildcards to customize CSS styles for ProcessMaker Screen controls.

### Apply CSS to Specific ProcessMaker Screen Controls

Use the following syntax to apply CSS styling to a specific control in this Screen by referencing its **CSS Selector Name** setting value. Use single quotes (`'`) around the control reference. The reference is case sensitive in the CSS syntax. As a best practice, use the same **CSS Selector Name** setting value on different controls of the same type to apply the same custom CSS style to all those controls.

`[selector='CSS Selector Name Setting that is case sensitive']`

Example for a Screen control with the **CSS Selector Name** setting value of `Submit Form`:

```plaintext
/ * Style a control by referencing its CSS Selector Name setting value * /
[selector='Submit Form'] {
    color: blueviolet;
}
```

### Apply CSS to All Pages in a Screen

Use `div.page` to apply CSS styling to all pages in a Screen.

Example:

```plaintext
/* Setting CSS for all pages on a Screen */
div.page{
    background-color: lightblue;
}
```

### Apply CSS to Make Form-Type Screens Read Only

A common use case is to make existing Form-type Screen controls read-only by using the **Read Only** setting for controls that have this setting. Instead, accomplish this with the Input CSS class.

```plaintext
input[type=text] {
    pointer-events: none;
    background-color: lightgrey;
}
```

Also use a [Nested Screen](/v1/docs/nested-screen-control#control-description) control in combination of a [Multicolumn/Table](/v1/docs/multicolumn-table-control) control to reference all inputs inside of the **Multicolumn/Table** control, which is `multi` in the example below.

```plaintext
[selector='multi'] input {
    pointer-events: none;
    background-color: lightgrey;
}
```

### Apply CSS to a Select List Control

CSS example for styling a [Select List](/v1/docs/select-list-control) field (with the CSS Selector Name set to `select`) to display the options in a horizontal layout.

```plaintext
[selector = 'select'] div {display: inline}
```