css Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    To start with, this style does not hide selection.

    To hide selection, they would rather need something like

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

    Also, you can turn on caret browsing and forget about hiding. F7 with Google Chrome or MS Edge. It is not perfect, too, but you would be able to copy things more easily.

    Besides, I don’t see why not copy not the rendered page but the raw HTML source. You can view this source text and work with it right in the browser or download the page’s HTML. Using this way, you don’t care about styles, text is text.

    Also, please see my suggestions in my comment. It all depends on your ultimate goals.

    Login or Signup to reply.
  2. 0

    I also couldn’t reproduce this issue with body::selection, but changing to div::selection helped me reproduce this problem.

    Anyway, you can use the Edge DevTools Override feature to achieve that, but you don’t need to change anything in the external stylesheets. Just find the HTML file, switch to Overrides and save internal CSS rules like

    <style>
    div::selection{background-color:red;}
</style>

    It should take priority over external CSS rules and change the selection color into red (or any color you want).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search