17

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?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
js-coder
  • 8,134
  • 9
  • 42
  • 59
  • 1
    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. – Alessandro Vendruscolo Dec 09 '11 at 14:13
  • 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 – Jörn Berkefeld Dec 10 '11 at 12:32
  • 10
    It's a [reported bug](https://bugs.webkit.org/show_bug.cgi?id=38943) in WebKit since May 2010. – geca Dec 12 '11 at 14:36
  • @geca 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? – js-coder Dec 12 '11 at 15:49
  • @dotweb No problem. I suggest editing your question with "EDIT: it's a know bug: link" and upvoting my first comment ofc. ;) – geca Dec 13 '11 at 07:29
  • 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: http://stackoverflow.com/questions/8866866/why-does-the-css3-pseudo-selection-not-change-the-color-for-all-parts#comment41956847_8866876 – Jon Oct 31 '14 at 17:08
  • @Jon I believe it’s now actually fixed in Chrome 39.0.2171.71. – Adam Dec 01 '14 at 22:15
  • @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. – Jon Dec 02 '14 at 17:39

4 Answers4

8

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

enter image description here

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • 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. – js-coder Dec 16 '11 at 15:05
  • I just want to ask, how did you make the jsfiddle to link back to the question/ – Madara's Ghost Dec 17 '11 at 19:10
  • 3
    @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. – ThinkingStiff Dec 17 '11 at 19:12
  • 1
    I awarded the bounty to you! :) – js-coder Dec 18 '11 at 20:52
  • @ThinkingStiff It is preventing me from using JavaScript over that `
    `, I was able to do that with `
     – Santosh Kumar Sep 30 '12 at 02:37
6

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

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

Adam
  • 1,744
  • 1
  • 14
  • 34
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • @Adam 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 :) – Madara's Ghost Dec 02 '14 at 07:48
0

use this :

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

::selection {
  background: var(--blue);
  color: var(--white);
}
AmirabbasGhasemi
  • 139
  • 7
0

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.

Nick Fury
  • 1,313
  • 3
  • 13
  • 23
  • 2
    That's not the same as selected text. That's focus selection. Two different things. – BoltClock Dec 12 '11 at 15:09
  • My bad I looked into a jquery solution to selected text and couldn't really find one. Good luck with finding a solution. – Nick Fury Dec 12 '11 at 15:30
  • 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. – js-coder Dec 12 '11 at 15:48