3

I need to change cursor type when the mouse gets over a selected text.

Here you can find an explanatory image :

Image to explain the type of cursor I want http://img190.imageshack.us/img190/1786/72162829.png

In this example the user has to drag some text to the textarea. Since the traditional pointer is not intuitive I would like to use the "move" pointer (cursor:pointer). I made this image with photoshop. Does anyone know how to make it for real in HTML / CSS / JAVASCRIPT ?

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
Licx
  • 1,293
  • 2
  • 11
  • 12

4 Answers4

3

Selection styles (not supported in IE) are the only thing that come to mind to achieve the desired effect:

::selection {
    color: red;
    cursor: move;   
}

::-moz-selection {
    color: red;
    cursor: move;
}

...but, although the text turns red (this is just a control), the cursor doesn't seem to change in either Safari or Firefox. If you wrap the text in an HTML element, however, and apply the styling to the element (via an ID or class), everything works fine.

You may be able to work around this problem by using JavaScript's window.getSelection() method to wrap the selected text in a DOM element and then style this DOM element. I'm not sure whether this is possible, though (and it might be a bit hacky).

Steve Harrison
  • 121,227
  • 16
  • 87
  • 72
0

As Tzury Bar Yochay indicates, you can do this via both CSS and JavaScript.

CSS - Use the cursor style property, which can be any of several standard values (which is preferred) or your own cursor file (but always include a fall-back using one of the standard values). Here's an example changing the cursor of any element with the "clickable" class to the standard cursor for something you can click:

.clickable {
  cursor: pointer;
}

(This should appear in your stylesheet file, or within a style element in the head of the document [if you can't use a separate file for some reason].) You can then apply that class to relevant elements.

JavaScript - The style property on an element exposes CSS styles, so you can do this:

var element = document.getElementById('someid');
element.style.cursor = 'pointer';

...although I generally prefer to do it by adding/removing a class name via the element's className property (which is a space-delimited list of classes for the element):

var element = document.getElementById('someid');
element.className += " clickable";
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I understand, but even in this case, the cursor will be "move" on the whole text, not only on the selected one. Is there a way to set CSS properties only on the selected text? – Licx Sep 29 '09 at 09:02
  • Yes, by wrapping the selected text in a `span` and applying the class to that span. I don't think there's a CSS pseudo-class for selected text. – T.J. Crowder Sep 29 '09 at 09:23
0

Here is very simple example you can check it on js fiddle. http://jsfiddle.net/umairb3/hbhvumn3/1/

p.normal::selection {
    background:#cc0000;
    color:#fff;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#fff;
}

<p class="normal moz">Hello world</p>
<p>Hello world</p>
Umair
  • 860
  • 2
  • 13
  • 30
-2

CSS

<style type="text/css">
    body{
    cursor: url(mycursor.cur)
}
</style>

JavaScript

document.body.style.cursor = 'wait';
Tzury Bar Yochay
  • 8,798
  • 5
  • 49
  • 73