How can I apply css styles to text that I highlight? Like highlighting in MSWord then clicking bold

Question

I am creating a graphic user interface with a drop down menu filled with css styles (bold, italics, changing color of words, etc). The problem I am running into is when I apply these styles, it applies to the entire paragraph and not the individual words. How can I code it to recognized what is highlighted and applying the formatting specifically to that.

I would like to apply span to just the highlighted portion. How?

Ex:

 <style> .red { color: red; } </style> <body> <p>This <span class="red">is a</span> test.</p> </body>

This is the only way I know of to apply span but would like to learn how to have it apply to what the user highlighted. Is there code that detects what user highlighted?

Edit: The goal is to highlight, apply a css style to what is highlighted, remove highlight and style is still there.

The initial answers saying to use ::selection are missing the boat. ::selection allows you to set the style of the currently selected text. As soon as the selection changes those styles no longer apply. To select text and change it "permanently" you have to find what is currently selected, then manipulate the DOM via Javascript to surround that text with a <span class="something"> (or "strong" or "em" as appropriate) — Stephen P
– Stephen P, Commented Oct 31, 2018 at 21:23

Kushtrim · Accepted Answer · 2018-10-31 21:08:52Z

2

I think you are looking for ::selection

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

::selection { background: cyan; }

Some text

answered Oct 31, 2018 at 21:08

Kushtrim

1,94910 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephen P Over a year ago

This would set the cyan background to the selected text, but as soon as the text was unselected it would go away. OP wants: 1. Select some text 2. Pick "bold" 3. Text stays bold even after the text is deselected.

user5329697 Over a year ago

The purpose is for site editors to make quick formatting edits buy highlighting what they want to edit and clicking on a premade list of css styles available. I was playing around with that code earlier but was stumped on how to apply the premade css styling to what is selected or highlighted. Edit: Yes exactly what Stephen said

Kushtrim Over a year ago

My bad. But I don't think that is possible without using javascript.

Rafael · Accepted Answer · 2018-10-31 21:11:11Z

If you want to highlight only the span.red, use the ::selection pseudo-element like so:

span.red::selection { background-color: red }

<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>

Zeusox · Accepted Answer · 2018-10-31 21:11:32Z

Try this out. It should work for you. We have an a span with an id bg-span on which we apply our styling.

<!DOCTYPE html> <html> <head> <style> #bg-span { background-color: #f18973; } </style> </head> <body> <p>Set a <span id="bg-span">background</span> color for only a part of a text.</p> </body> </html>

Mohammad Ali · Accepted Answer · 2018-10-31 21:35:00Z

I searched and found one solution to get selected/highlighted text by JavaScript and hide it.
You can use this solution and change code to wrap selected text with span and add selected class to that span.

JQuery selector for highlighted text

Good Luck

Collectives™ on Stack Overflow

How can I apply css styles to text that I highlight? Like highlighting in MSWord then clicking bold

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Related