How to highlight selected text using css?

css styles

10,559

This is what you can do highlight text in html using CSS. As you drag over the text, the text will be highlighted

<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>

10,559

Manoj Kumar

Updated on June 04, 2022

Comments

Manoj Kumar almost 2 years

how to highlight the selected one of the text like a button it should be highlighted for example i need like to be displayed in screen using css

enter image description here

Can anyone help me with a solution or link to share any information.
- webta.st.ic almost 6 years
  
  Please creata a a Minimal, Complete, and Verifiable example: stackoverflow.com/help/mcve
- Abdelghani AINOUSS almost 6 years
  
  Agree, the question is not clear
JeffreyPia about 5 years

Color and background are the only things that work with ::selection. Padding will not have any effect.