ARTICLE AD BOX
Consider the following HTML snippet:
You see "foo bar baz qux" rendered. But if you select the whole thing and copy and paste it into another program, the text in the controls gets skipped, so all that pastes is "foo qux". Is there a way to make it all paste instead, preferably without having to use JavaScript to construct the entire clipboard contents from scratch?
There is no reliable pure-CSS or HTML-only way to make the browser include the visible text inside <input> and <select>elements when the user selects a larger parent container and hits Copy (Ctrl+C).
Browsers treat form controls specially during text selection and clipboard operations:
The rendered text you see ("bar" in the input, "baz" in the select) lives inside the control's shadow DOM / internal widget.
When you select across a parent element, the browser's selection model skips the internal content of native form controls and only grabs text nodes from regular elements.
This is intentional browser behavior for security, accessibility, and consistency reasons. It has been this way for decades and is not changeable with user-select, pointer-events, contenteditable, or similar CSS tricks.
CSS properties like user-select: all; or pointer-events: none; on the controls (or parent) do not force their internal values into the outer selection.
Explore related questions
See similar questions with these tags.
