Styling and CSS

To style various Meta Bind elements you need to write custom CSS. The easiest way to load custom CSS into Obsidian is with a CSS snippet.

Example

Let’s say we want to color specific progress bars red. For this we can utilize the class argument.

First we create our progress bar with the class argument. In this case we name our special class red-progress-bar.

INPUT[progressBar(class(red-progress-bar)):someProperty]

Then we create our CSS snippet with a selector for a progress bar with the class red-progress-bar. Then we target the progress bar progress element and set the background color to red.

snippet.css

.mb-input-type-progressBar.red-progress-bar .mb-progress-bar-progress {
    background: var(--color-red);
}