matt matt - 4 months ago 21
HTML Question

Styling the cursor with css

I know it's possible to use an image as the cursor, like this:

.module {
cursor: url('path-to-image.png'), auto;

Is it also possible to use a custom div element as the cursor or otherwise customize it with css properties? I'd like to use a triangle as shown here. Is that possible somehow?

How would one go about doing this?


I looked into this a bit, and while it's impossible to do with CSS, you can actually do this with jQuery.

You create a div and make it follow the cursor while also hiding the "normal" one, hence creating a bit of a cursor. It's a bit of a hack, as it's not actually a cursor, and it may or may not have some compatibility or functional problems.

Anyway, here's the code:

$(document).bind('mousemove', function(e){
       left:  e.pageX + 1,
       top:   e.pageY
#tail {
    position: absolute;
    float: left;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;

* {
  cursor: none;
<script src=""></script>
<div id="tail"></div>

<a href="">Click me!</a>

I had to offset the cursor by one pixel (e.pageX + 1), otherwise the cursor-div would be directly below the cursor and you'd always be clicking on that instead of the object you actually want to click on.