In Chrome (I am using version 16.0.912.75 m on Win 7) I find that no matter what I have a cursor set as, as soon as I hold my left mouse button down and move the cursor then the cursor type is changed to text
(even when there is no text anywhere on the page).
Is this a bug? Does anyone know how to get around it as it is making my drag and drop tool look a bit silly!
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
}
<div></div>
Original JSFiddle: http://jsfiddle.net/KJfbs/
Edit
As answered by @davgothic below, adding -webkit-user-select: none;
will fix the issue when there is no text. However, should we position the element absolutely and place text behind it then the problem persists.
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis eros mi, non tristique diam. Cras auctor posuere urna, porta egestas metus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer id arcu quis ipsum feugiat consequat id sit amet velit. Vivamus at quam quis lacus pellentesque egestas eu sed nulla. Vestibulum arcu augue, ultrices quis lobortis vehicula, molestie ut velit. Donec egestas lacus id diam euismod a lacinia lorem ultrices.
Vivamus non mi nunc. Pellentesque vitae sodales magna. In ac urna tortor. Quisque mattis mollis magna ultricies pellentesque. Mauris sed lorem eget sem imperdiet volutpat. Fusce fringilla pretium enim, eu ultricies justo fringilla in. Aliquam ac dui risus, ut eleifend tellus.
Nulla facilisi. Fusce nec leo lectus, in porttitor est. Etiam in posuere tellus. Maecenas viverra nibh et odio aliquam at aliquet arcu ultricies. Aliquam in arcu ac mi mollis ultricies vitae dapibus risus. Integer a arcu eu ipsum fermentum dignissim a vitae nunc. Pellentesque consectetur rutrum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi semper dapibus nunc. Mauris congue est sit amet neque condimentum nec fermentum massa sagittis. In bibendum cursus tortor quis scelerisque. Mauris est nisi, elementum eu scelerisque vel, placerat quis erat. Nam malesuada massa quis sem eleifend tempor eget ut erat.
Etiam egestas ligula nec odio molestie placerat. Donec nunc dolor, venenatis id iaculis vel, dapibus quis justo. Suspendisse sed nunc eget nunc luctus hendrerit eget at tortor. Quisque consectetur, eros eget dictum lobortis, erat nisl eleifend metus, egestas vulputate purus urna ut arcu. Nunc mollis tempor mi, quis commodo diam semper id. Nulla sed urna sit amet tellus consequat elementum. Maecenas cursus ipsum sit amet nunc laoreet quis placerat urna tempor. Maecenas tristique sodales posuere. Mauris scelerisque ornare tincidunt. Nulla tempus gravida orci, vel lacinia ante placerat ac. Donec gravida erat vitae elit suscipit ac ullamcorper lacus faucibus.
Aenean dictum elit eu nunc varius suscipit. Praesent ultrices, nunc ullamcorper posuere consectetur, purus ipsum dictum nisl, ultrices rhoncus nisl mauris sit amet dui. Donec convallis arcu eu nibh laoreet pulvinar. Sed euismod volutpat nibh eget faucibus. Maecenas interdum dapibus consequat. Sed sit amet leo lectus, euismod molestie nunc. Donec dui tellus, dignissim ut luctus non, facilisis eu magna. Phasellus a neque et dui luctus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat mollis dui, eget varius nunc gravida eu. Vivamus nibh erat, dapibus eu mattis blandit, sodales ut nisi. Vivamus pellentesque congue placerat. Pellentesque ultricies turpis vel odio imperdiet et facilisis leo viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Original JSFiddle: http://jsfiddle.net/KJfbs/2/
However it's not a bug - instead it's an accessibility feature called "Navigate pages with a text cursor". To disable this, and the blinking cursor everywhere, open the Chrome settings. You can easily do this by searching for "settings" and then clicking the "manage settings" button.
To remove an individual cursor pack, once you on manage page, you need to press “MANAGE” button of the collection you want to edit. The pop-up window will appear with list of cursor packs from that collection, just press “DELETE” next to the name of the cursor pack you wish to remove.
You can navigate web pages, select text, and click links with your keyboard instead of your mouse. This setting is called caret browsing.
Try adding -webkit-user-select: none;
to the CSS for that element to prevent text selection.
Example: http://jsfiddle.net/KJfbs/1/
Personally I would also add these...
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
...for cross browser compatibility.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With