https://cassidoo.co/post/css-for-dialogs/ Cassidy Williams Software Engineer in Chicago Cassidy's face home newsletter blog github bluesky twitter linkedin A couple CSS tricks for HTML Dialog elements Jan 9, 2025 #technical --------------------------------------------------------------------- I recently was messing around with the HTML element. It's really handy for native dialogs without a ton of JavaScript. If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the Settings gear button at the top. Anyway! There's a couple tricks that you might find handy when you're implementing your own s on your websites! Blur the backdrop The ::backdrop CSS pseudo-element isn't limited to s. You can style it however you want, but if you want to keep it simple, you can add a blur filter like so to be able to blur the background ever so slightly: dialog::backdrop { backdrop-filter: blur(2px); } You can add other properties, of course, like background-color for example. I also wrote about styling pseudo-elements with JavaScript if you want to do more with this in general! Disable page scrolling when a is open This is a funky selector here, but it's pretty cool. When a is open, it adds an open attribute to the tag. body:has(dialog[open]) { overflow: hidden; } This selector checks to see if the has a with the open attribute. If so, it disables scrolling on the page! Granted, the weirdness is that if your dialogs are tall, you might need to enable scrolling in them separately, but it keeps the page behind your dialog from moving around when you scroll. That's all, folks! I hope this was helpful for you! --------------------------------------------------------------------- Random post * Older post - View posts by tag #advice #personal #musings #events #learning #technical #work #meta (c) 2025 Cassidy Williams. This site is open source! <3