Menu
Is there a way to apply the ::selection and ::-moz-selection CSS pseudo-elements to the text inside a textarea?
textarea::selection {
color: #ff0000;
}
Isn't working
966
CSS ::selection Selector You must have to write both rule ::selection and ::-moz-selection to apply CSS. -moz is prefix of Mozilla Firefox browser. Still this ::selection selector not release on CSS2 or CSS3, so is not officially. Only some CSS properties are used inside a ::selection declaration block.
The ::selection selector matches the portion of an element that is selected by a user. Only a few CSS properties can be applied to the ::selection selector: color, background, cursor, and outline.
You can change the background color and color of selected text by styling ::selection . Styling this pseudo element is great for matching user-selected text to your sites color scheme.
The user-select property enables authors to specify which elements in the document can be selected by the user and how. Chrome has supported only prefixed version: -webkit-user-select.
According to this, it should work.
Can you try giving it an !important?
Can you try applying it to a different element than a textarea, e.g. a div? If it works there, it works differently for input elements - but I can't find any resources mentioning that.
197
Updated as you said here, I'll update this question too:
I disagree. It is working ;)
Tested on Firefox 4.0b6
I can confirm the following code works at least under Firefox 4.0b6 (Taken from my own answer)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
p::-moz-selection, input::-moz-selection, textarea::-moz-selection {
color: red;
background-color: grey;
}
</style>
</head>
<body>
<p>This paragraph is selection-aware.</p>
<form action="#">
<input type="text" id="itext" value="So is this input[text]" />
<textarea id="itextarea">And this textarea, as well</textarea>
</form>
</body>
</html>
It may not be wroking programmatically, if you are not careful with what you are doing. Maybe you are trying to select something with jQuery.select() and you are selecting the textarea object instead of its content.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
