CSS3 - How to style the selected text in textareas and inputs in Chrome?

Question

EDIT: As @geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!

The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15. (I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)

Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/ The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)

Am I doing something wrong or is it just not possible to style it at Chrome right now?

Anuska

I'm on Safari 5.1.2 on Mac OS and the selection inside the textarea or input has the default style, not that one declared on the CSS. – Retsina

i tried adding the pseudo-classes directly to the input/textarea with no success either - seems like it's a bug/feature as it also occurs in the current canary build (v17.xxx) - tested on Win7 x64 – Siddur

It's a reported bug in WebKit since May 2010. – Latricialatrina

@Latricialatrina Thanks for the information, I guess that answers my question. Shall I just delete my question since there is no real answer or what do you suggest? – Anuska

@dotweb No problem. I suggest editing your question with "EDIT: it's a know bug: link" and upvoting my first comment ofc. ;) – Latricialatrina

The webkit bug has been fixed, but since Chrome forked off with blink, the fix isn't there. I wrote about it in a comment here: #8867366 – Accusatorial

@Accusatorial I believe it’s now actually fixed in Chrome 39.0.2171.71. – Rad

@Adam, I tested again in 39.0.2171.71 and there hasn't been any recent improvement to the issue. The issue is easiest to see in the plexcode example given in the original webkit bug (link is too long to post in comment). But if you look at that plexcode example, the highlighting of the input works as long as there is text in the input OR the enclosing hr's are also not highlighted. If the input is empty or you also select the enclosing hr's, the input highlight color is incorrect. – Accusatorial

Answer 1

Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.

Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/

HTML:

<textarea>&lt;textarea&gt; Doesn't highlight properly in Chrome.</textarea><br />
<input value="&lt;input&gt; Doesn't highlight properly in Chrome." />
<p>&lt;p&gt; Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable>&lt;div contenteditable&gt; Highlights just fine in Chrome!</div>

CSS:

textarea, input, p, div {
    width: 400px;
}

#div-textarea {
    -webkit-appearance: textarea;
    height: 32px;
    overflow: auto;
    resize: both;
}

::selection {
    background-color: black;
    color: white;
}

Output (Chrome):

Jeane

That's pretty smart, nice idea! I probably won't use it, though. I'm using the inputs to send data to a server. It's not worth replacing the inputs with divs and adjust the AJAX stuff just for the simple styles. :) (Except when the site / app doesn't have a backend). I guess I'll have to wait till the WebKit team fixes this issue. – Anuska

I just want to ask, how did you make the jsfiddle to link back to the question/ – Counterblow

@Truth Scroll way down in the HTML frame. It's at the bottom. It's a manual process I do each time I create one. – Jeane

I awarded the bounty to you! :) – Anuska

@Jeane It is preventing me from using JavaScript over that <div>, I was able to do that with <textarea>. – Kelly

Answer 2

This is a known WebKit bug. Sorry, no solution thus far :)

Update: the WebKit bug was fixed on 10/13/2014.

Watchman

@Rad Feel free to edit that into my answer. It's a Community Wiki so you should be able to edit it without being peer reviewed :) – Counterblow

Answer 3

Is there any chance that instead of using CSS pseudo-element you can use some jQuery.

take a look at this http://jsfiddle.net/J5N7K/6/.

if you don't understand the jQuery feel free to ask about it.

Chavey

That's not the same as selected text. That's focus selection. Two different things. – Urn

My bad I looked into a jquery solution to selected text and couldn't really find one. Good luck with finding a solution. – Chavey

Thanks, for the answer, but that's not what I'm looking for. By the way you can even achieve this without JavaScript, using the :focus CSS pseudo class selector. – Anuska

Answer 4

use this :

::-moz-selection {
  background: var(--blue);
  color: var(--white);
}

::selection {
  background: var(--blue);
  color: var(--white);
}

Caterwaul