Selection ehy

Posted by admin on September 27th, 2011 at 8:06 pm

So tonight’s website question was from another web designer I know, they had been contacted by the client of a new website they had just knocked up and had a problem that had stumped them.

This was it: The client did not feel they could copy and paste text in the document. She was trying and it was driving her mad as she couldn’t select anything in the web page.

My initial thought was there was some kind of faux div above the text in question I firebugged and firebugged – alas, to no avail. Then I though that the problem may be simpler than we thought, and I remembered tinkering with the pseudo CSS selector ::selection and immediatley clicked dragged over a section then pasted into PlusPlus it had copied and pasted the desired portion of the text…. so it was definitely something to do with the selection pseudo class, I looked through the stack of applied CSS on the given elements and found the answer.
Surprisingly there was no background to the selection, but it was set to be the colour white. The selection must default to black when the text is white, her site had a black background with white text…. when highlighting the text it had no affect.

.className::selection {
color:#424242; background:#fca3ea;
}
.className::-moz-selection {
color:#424242; background:#fca3ea;
}
.className::-webkit-selection {
color:#424242; background:#fca3ea;
}
Here is an example (click & drag over this text)

Leave a Reply

Preview

  1.  

    |