I have below html fragment:
<html>
<body>
<div
style="position: absolute; width: 953px; height: 725.57px; transform-origin: left top; z-index: 90; touch-action: none; top: 0px; left: 0px;">
<svg xmlns="http://www.w3.org/2000/svg" width="953" height="725.5699020480855" viewBox="0 0 1123 855" style="pointer-events: auto; cursor: crosshair;">
<g>
<g id="1f6020e0-f101-419a-8f2c-74069caebad9">
<foreignObject x="528.9701559220881" y="173.25467684286463" width="200" height="80">
<textarea style="border: none;outline: none;background: transparent;resize: inherit;overflow: hidden;color: rgb(255, 0, 0);font-family: Helvetica;overflow-wrap: break-word;width: 200px;font-size: 16px;line-height: 18.4px;cursor: crosshair;pointer-events: none;height: 40px;user-select: none;">s123456789</textarea>
</foreignObject>
</g>
</g>
</svg>
</div>
</body>
</html>What I don't want is the textarea element defined in the foreignObject element can be selected like below
I have added user-select: none in the style definition, but it doesn't work, I am not sure whether it's because the user-select property is not working under the foreignObject element, can anybody help to explain ?
