<selectedcontent>: update to description and specification

[estelle]

per #40499

[github-actions]

Preview URLs

• /en-US/docs/Web/HTML/Reference/Elements/selectedcontent

(comment last updated: 2025-07-31 14:21:12)

[dipikabh]

Added a few more cleanup suggestions, but it's looking ready to land. Thanks!

[dipikabh]

moving this to the previous para to keep continuity in text explaining the example

Suggested change

By targeting the content inside `<selectedcontent>`, you can hide elements such as images in the button, without affecting how they appear in the drop-down, as shown in the following snippet:

[dipikabh]

Suggested change

For example, your `<option>` elements may contain icons, images, or even videos that render nicely inside the drop-down, but could cause the select `<button>` to increase in size, look untidy, and affect the surrounding layout.

For example, your `<option>` elements may contain icons, images, or even videos that render nicely inside the drop-down, but could cause the select `<button>` to increase in size, look untidy, and affect the surrounding layout. By targeting the content inside `<selectedcontent>`, you can hide elements such as images in the button, without affecting how they appear in the drop-down, as shown in the following snippet:

[dipikabh]

wdyt about this? changed the order a bit

Suggested change

	You can target the currently selected `<option>` element's content as it appears inside the select button with CSS styles. This lets you customize how the selected option appears in the button, separately from how it appears in the drop-down list, as it doesn't affect the styling of the content of the `<option>` that was cloned.
	You can target the content of the currently selected `<option>` element and style how it appears inside the select button. Styling the button doesn't affect the styling of the content of the `<option>` that was cloned. This lets you customize how the selected option appears in the button, separately from how it appears in the drop-down list.