9

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

2 Answers 2

5

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.

3
  • It has worked for me on divs and spans. Adding an important didn't help. Oddly, on a multi-line textarea when I select the whole textarea the blank lines will be selected with the background-color I specify, but the ones with writing in them have the regular selection color. I spent all morning looking for some resource mentioning why it would be handled differently in inputs, but I can't find either that or a working example.
    – Trevor
    Jan 11, 2010 at 21:54
  • This sounds like Mozilla is treating differently selections that are part of a form input. I'm afraid this might be one of those cases where nothing can be done, because the browser's input styling guidelines overrule everything else, similar to form input elements like select or file that can be customized in a very limited way only.
    – Pekka
    Jan 11, 2010 at 22:06
  • 2
    Works for me in FF, but not in Chrome.
    – El Yobo
    Mar 25, 2011 at 3:38
1

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.