CODEWITHSUNDEEP
htmlcss
Dinnu Buddy
Dinnu Buddy

Reputation: 399

How to highlight the text in paragraph

How to highlight the text in paragraph on selection by mouse. I think I have to use some CSS3 property but I do not know what to use.

see the below image, that is what I want to do...

Here you can see that they have changed the background color and text color when someone select that portion.

enter image description here

Upvotes: 3

Views: 1297

Answers (7)

Coder Sabbirul
Coder Sabbirul

Reputation: 16

<html>
<head>
<style>
p1:hover {
    background-color: yellow;
}
</style>
</head>
<body>

<p>How to highlight the text in paragraph on selection by mouse. <p1>I think I have to use some CSS3 property</p1> but I do not know what to use.

see the below image, that is what I want to do...</p>

<br>


<!-- So you have to use CSS and Using hover you can do that i have already upload an image to show you the example how it's work    -->

</body>
</html>

enter image description here

Upvotes: 0

Gavin
Gavin

Reputation: 6394

You can ::selection (and ::-moz-selection) to tailor the colour as required. This can be for the entire document or specific elements.

https://jsfiddle.net/gRoberts/ozb5orLy/1/

Upvotes: 1

Clemens Himmer
Clemens Himmer

Reputation: 1342

You just have to change the pseudo-selector ::selection.

For it to properly work on Firefox you'll have to use the specific ::-moz-selection selector additionally.

Basic example:

*::selection {
  background: red;
  color: blue;
}

*::-moz-selection {
  background: red;
  color: blue;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Upvotes: 2

Steveo
Steveo

Reputation: 557

You can use CSS to do this, using selection

Example here

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

using the ::selection selector you can get this job done. Taking from this site

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing

p::selection {
  background-color: #fff2a8
}

p::-moz-selection {
  background: #fff2a8;
}

Upvotes: 0

keziah
keziah

Reputation: 574

Use the CSS's ::selection

::selection {
    background-color: yellow
}

Upvotes: 0

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

You can use this below css for text selection.

::-moz-selection { /* Code for Firefox */
    color: red;
    background: yellow;
}

::selection {
    color: red;
    background: yellow;
}

Upvotes: 0

Related Questions