How to change color after select a text or line?

Asked 19-Jul-2021
Viewed 529 times
Ask Question

1

How to change color after select a text or line?

Ravi Vishwakarma
asked by Ravi Vishwakarma in web application
Answer Add comment

3 Answers

0

The color of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background.

Below example implements the above approach:

Example:

<!DOCTYPE html>
<html lang='en'>

<head>
	<title>
		How to change the color of selected text using CSS?
	</title>

	<style>

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

		p::selection {
			background: red;
			color: yellow;
		}
	</style>
</head>

<body>
	<div class='geeks'>

<h1>This is heading</h1>
		<p>
			केसरी (केसरी का मतलब संस्कृत में शेर होता है)की स्थापना तिलक ने 1881 में की थी। केसरी एक महान प्रोजेक्टर और भारतीय राष्ट्रीय स्वतंत्रता आंदोलन का संदेशवाहक साबित हुआ। यह राजसी अखबार जो कई ज्वार-भाटे(उतार-चढ़ाव) को पार कर चुका है, अभी भी द डेली केसरी(The Daily Kesari) के नाम से चल रहा है। मराठा को भी तिलक द्वारा तत्कालीन राष्ट्र में प्रचलित विभिन्न स्थितियों को अपने लोगों के सामने उजागर करने के लिए शुरू किया था। पत्रिकाओं का मुख्य उद्देश्य लोगों के मन को स्व-शासन की आवश्यकता के लिए प्रेरित और प्रज्वलित करना था और उनके अधिकारों के लिए लड़ना था।

इन अखबारों को शुरू कराने में बहुत से लेखकों का योगदान रहा है जैसे - निबन्धमाला के लेखक विष्णुशास्त्री चिपलूनकर, लोकमान्य बाल गंगाधर तिलक और गोपाल गणेश अगरकर के साथ महादेव बल्लाल नामजोशी, वामन एस आप्टे और गणेश के. गर्दे आदि महान विभूतियों ने मिलकर यह समाचार पत्र की शुरुआत –
		</p>
	</div>
</body>

</html>
Add comment
Ravi Misra
answered 17-Jan-2023 by Ravi Misra

1

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>

</body>
</html>

Output

How to change color after select a text or line?
Add comment
Steilla Mitchel
answered 17-Aug-2022 by Steilla Mitchel

3

::selection use to select a paragraph and then change the color
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
The following example makes the selected text white on a orange background: 
<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title></title>

    <style>

        ::selection {

            background-color:orange;

            color:white;

        }

    </style>

</head>

<body>

    <p><strong>Note : </strong> Select some data of text</p>

    <b>Windows App Development Solution</b><br />

MindStick is examining enhanced ideas to create user interference more fertile with our enthralled windows application development services. 

    Although inadequate, windows have a faithful user base, growing mobile apps for this program unleashes vast business possibilities.

     we are identified for producing reliable and results-oriented Windows Phone Apps Development solutions.

     Our Windows developer team is centered to create windows mobile apps that will deliver user experience and interaction enlightening, connected, and supportive.

</body>

</html>

Add comment
Ethan Karla
answered 23-Jul-2021 by Ethan Karla