Styling Native Dialogues

• October 31 2022
• 1 min. read

In dialogues in the web we saw how to create native dialogues using HTML and Javascript. This post will look at how to style the dialogues and the parent element.

Styling the dialogue element #

The first item to style is the dialog element itself.

In this example, we set the width of the modal dialogue to 50ch and a 1em padding.

We can add more styles as necessary.

.modal {
  padding: 1em;
  max-width: 50ch;
}

Styling the backdrop #

The other CSS rule is the ::backdrop pseudo-element.

The ::backdrop CSS pseudo-element is a box the size of the viewport that is rendered immediately beneath the presented dialogue element.

In this example, we darken the backdrop using a rgba color for the background color of the background element.

.modal::backdrop {
  background: rgb(0 0 0 / 0.8);
}

Edit on Github