CODEWITHSUNDEEP
csstinymceformatselectionhighlight
user961627
user961627

Reputation: 12747

change style of selected text in tinymce editor (not blue background highlight)

How can I set the background of the user-selected/highlighted text in a TinyMCE editor? I don't want the default selection style of a blue background and white foreground. How can I change it? These are my desperate attempts in the content.css file of the TinyMCE theme files, but they don't bring any change!

.mceContentBody::-moz-selection { background: transparent !important; }
.mceContentBody::selection { background: transparent !important; }    
.mceContentBody::-webkit-selection { background: transparent !important; }

#tinymce::-moz-selection { background: transparent !important; }
#tinymce::selection { background: transparent !important; }    
#tinymce::-webkit-selection { background: transparent !important; }

:-moz-selection { background: transparent !important; }
::selection { background: transparent !important; }    
::-webkit-selection { background: transparent !important; }

p:-moz-selection { background: transparent !important; }
p::selection { background: transparent !important; }    
p::-webkit-selection { background: transparent !important; }

span:-moz-selection { background: transparent !important; }
span::selection { background: transparent !important; }    
span::-webkit-selection { background: transparent !important; }

Please help!

The HTML code of the relevant TinyMCE elements is:

<iframe>
<html>
<head>...</head>
<body id='tinymce' class='mceContentBody'>...
<p> <span> Here is the text that should have a transparent background when highlighted by the user </span> </p>
</body>
</html>
</iframe>

Upvotes: 2

Views: 1135

Answers (1)

user961627
user961627

Reputation: 12747

Okay, I was able to solve this by not changing the direct TinyMCE theme files. Instead, I added the selection CSS rules in one of the external CSS files that I call from the tinyMCE init function. Then it worked.

Upvotes: 1

Related Questions