Change cursor image on scrollbar in chrome

Question

I need to change custom cursor for scrollbar in Chrome. I have lightbox which has set custom cursor with big X and Close text. Problem is that in chrome the cursor definition is inherited by the scrollbar as well, which looks a bit funny.

See the fiddle:

<div class="below">
    <div class="full">
         <div class="scrollable">long text</div>
    </div>
</div>

CSS:

.full{
    position:fixed;
    background:red;
    height:100%;
    width:80%;
    overflow-y:scroll;
    cursor: url('cursor.cur'),not-allowed;
}
.scrollable{
    padding:1em;
    background:white;
    position:relative;
    display:block;
    width:80%;
    margin:50px auto;
}

http://jsfiddle.net/3fY9r/1/

is there any way how to trigger the scrollbar only and change the appearance back to default cursor?

Answer 1

You can use the vendor selectors for chrome's scrollbar to set styles. However, I don't think it will allow you to change the cursor. You could try this to see if it works:

::-webkit-scrollbar {
    cursor:pointer;
}

UPDATE

After looking more into this issue, apparently there is a bug with Chrome and updates to the cursor on scrollbars. Here is the ticket, it is still open. You can still change the styles, but the customizations seem a bit limited.