Styling Native Dialogues
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.
Styling the backdrop #
The other CSS rule is 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.
background: rgb(0 0 0 / 0.8);