How to override CSS in edge browser

We have a vendor provided site that for some reason has decided that has a stylesheet with:

body::selection{background-color:transparent;}

We have to copy a lot of elements off this page and it is very difficult to tell what is going to be copied when you can’t see what is selected. I have no way to get the vendor to fix it. And I am using a locked down enterprise browser — so I can’t install in any extensions or what not.

I tried to use the Edge override feature but the stylesheet’s name changes every session so that only worked for a short while.

I also tried using a javascript bookmarklet. I see it put my "corrected" css into the head element, but it doesn’t work on that page for some reason. It does work on other pages

javascript:(function(){const injectCSS = css => {  let el = document.createElement('style');  el.type = 'text/css';  el.innerText = css;  document.head.appendChild(el);  return el;};injectCSS('body::selection { color:red!important;background-color:lemonchiffon!important;text-decoration:underline!important; }');})()

I can’t find any other way to make selections visible. Anybody have any ideas?

EDIT for additional information

This is our incident reporting system. I need to copy user ids and corresponding record ids to look them up. They tend to be 10 or more digit numbers and retyping them is difficult to do accurately (butterfinger-me!). It worked as you would normally expect up until a week ago. I think somebody on the vendor side did something stupid with their sass build or what not. They said a fix was coming, but now it has been put off for months.

Our team has folks of varying technical abilities so copying from the source is not likely to be too successful for some of them. And we need to do this many times a day.

EDIT didn’t know how to do a code snippet

body::selection{background-color:transparent;}
div{margin:20px 0;}
input{margin-left:5px;width:50%}
.boxy{padding:15px;border:1px solid black;}
   

<div id="selectiontransparent">
  <div><span>Requestor ID</span><input value="GX982739" /></div>

  <div><span>User ID</span><input value="D224433" /></div>

  <div><span>Location ID</span><input value="34234-65" /></div>

  <div>
    <span>Short description</span
    ><input
      value="Incoming student missing required courses, not yet assigned. "
    />
  </div>
  <div class="boxy">
    Suspendisse potenti. This is a bunch of useless notes from somebody else.
    Sed mattis lacus eget turpis faucibus, nec suscipit erat rutrum.
  </div>
  <div class="boxy">
    Vestibulum sed augue nec purus pulvinar mollis. The class number is
    <b>00000093293279987</b> Nullam elementum elit sapien, sed dignissim ligula
    euismod vitae. Nulla in tellus pretium, iaculis felis at, finibus velit.
  </div>
</div>