Really change text color on select

Question

We have a link that is often copied to the users email tool, including color and background color. Since there is a Whitelabel solution, this can cause a problem when the text is white.

text is white
user selects the text to copy it
text is white again (and in the worst case, the background color is lost)

I know the ::selection pseudo class, but it doesn't help for the copy process. See this fiddle: https://jsfiddle.net/vvfL2516/

.background { background: #222; }

.link { color: #fff; }
.link::-moz-selection {
    background: #f00;
    color: #0f0;
}
.link::selection {
    background: #f00;
    color: #0f0;
}

Thunderbird shows a blue link (=nice), but it's invisible in Libre Office and Google Docs, ... (not nice)

Update 2015-09-24:

The link form Andrew Lyndem contains the answer: https://stackoverflow.com/a/7454048/461754

Maybe something like this: http://stackoverflow.com/questions/7439210/remove-styles-from-text-when-copying-cutting-using-css-or-javascript — AndrewL64, Sep 09 '15 at 23:02
I copy-pasted your version on a WordPress WYSIWYG editor just now and it works beautifully. Don't know how it looks on the email tools though. — AndrewL64, Sep 09 '15 at 23:11
I've worked with the base from @Andrew Lyndem Comment. This seems to be the only solution! — netzaffin, Sep 23 '15 at 22:48

score 0 · Answer 1 · answered Sep 09 '15 at 23:11

0

if you really really want to change it, use not only active and focus a attributes, but also an a:hover so that it highlights when you hover over it

.background {
  background: #222;
}
.link {
  color: #fff;
}
.link::-moz-selection {
  background: #f00;
  color: #0f0;
}
.link::selection {
  background: #f00;
  color: #0f0;
}
a:focus,
a:hover,
a:active {
  background: red;
  color: green;
}

<div class="background">
  <a class="link" href="https://app.tomvote.com/result/3a13bac6a6f93fa4fff0036bb1e8b7b5">Show Vote Results</a>
</div>

answered Sep 09 '15 at 23:11

Rachel Gallen

27,943
21
72
81

you can adjust the colors obviously, i have used bright ones to hughlight the effect :) – Rachel Gallen Sep 09 '15 at 23:12
But will this work on email tools like Libre Office and Google Docs though? +1 – AndrewL64 Sep 09 '15 at 23:19
have never used Libre Office. it would work on Google Docs though – Rachel Gallen Sep 09 '15 at 23:21
I've tried this on Google Docs and Libre Office, but it does not work for me :( I'm using Ubuntu 14.04 with Chrome. – netzaffin Sep 10 '15 at 15:28

*Really* change text color on select

1 Answers1

Really change text color on select