How to override CSS in edge browser - Stack Overflow

admin管理员组

文章数量:1122832

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>

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>

• css
• microsoft-edge

Share Improve this question Follow edited Nov 22, 2024 at 21:12 Rothrock asked Nov 22, 2024 at 18:07 RothrockRothrock 1,51222 gold badges1717 silver badges4040 bronze badges 7

• 3 Have they done this to try to cut down on copying? Is the content copyrighted in some way? – A Haworth Commented Nov 22, 2024 at 18:19
• @Rothrock — I answered but then realized that I did not completely understand your ultimate goals. Why are you copying the page elements from some other side? If you really want it, why can't you just copy the entire source HTML, copy all dependencies, and then override the selection style in the copy? If you find it difficult, you can use some web scraping tool or create your own one. – Sergey A Kryukov Commented Nov 22, 2024 at 18:29
• @A Haworth — “Have they done this to try to cut down on copying?” Well, hardly. It would be a very naive attempt to hide anything. What is published is always open. They only can hide server-side code and protect themselves from cross-origin requests... – Sergey A Kryukov Commented Nov 22, 2024 at 18:35
• edited to answer some of these points. – Rothrock Commented Nov 22, 2024 at 18:49
• What is the name of this ticketing software? Why do you need to copy data off this page in such a "screen scrape"-esque way? I suspect this isn't really a programming question but rather a web application usage question. From another perspective, is there not some reporting tool or API that is already part of this software platform you can use to get this data, rather than scrape the DOM or page for it? – TylerH Commented Nov 22, 2024 at 19:12

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 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.

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).

本文标签： How to override CSS in edge browserStack Overflow