Change color of `<p>` element in `<dialog>` element to make it visible.

[manav-sharma69]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/:modal

What specific section or headline is this issue about?

Try it

What information was incorrect, unhelpful, or incomplete?

In the example, when the modal is opened, a random number should be shown. It is rendered inside the <p> element but because of its color, its not visible.

It seems to inherit the CanvasText color from the <dialog> element:

What did you expect to see?

Add the following CSS style to the <p> element inside the <dialog>:

dialog p{
  color: initial;
}

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

I don't know how to make changes to the embedded content, otherwise, I would have created a PR.

MDN metadata

Page report details

* Folder: `en-us/web/css/_colon_modal` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:modal * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/_colon_modal/index.md * Last commit: https://github.com/mdn/content/commit/1c4eb0bfb5f72a26fcc21a83fac91aa3e66c2fb8 * Document last modified: 2024-01-02T16:00:45.000Z

[github-actions[bot]]

It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[Josh-Cena]

The code you want to edit can be found in https://github.com/mdn/interactive-examples/blob/main/live-examples/css-examples/pseudo-class/modal.html and https://github.com/mdn/interactive-examples/blob/main/live-examples/css-examples/pseudo-class/modal.css

[manav-sharma69]

@Josh-Cena Thanks for the links!