{"id":14043,"date":"2011-09-05T20:40:02","date_gmt":"2011-09-06T03:40:02","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14043"},"modified":"2021-06-03T14:59:37","modified_gmt":"2021-06-03T21:59:37","slug":"cursor","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","title":{"rendered":"cursor"},"content":{"rendered":"\n<p>The <code>cursor<\/code> property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it&#8217;s only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the idea of certain functionality. So try not to break that affordance.<\/p>\n\n\n\n<p>There are a bunch of them:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_uCwfB\" src=\"\/\/codepen.io\/anon\/embed\/uCwfB?height=450&amp;theme-id=1&amp;slug-hash=uCwfB&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed uCwfB\" title=\"CodePen Embed uCwfB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.auto            { cursor: auto; }\n.default         { cursor: default; }\n.none            { cursor: none; }\n.context-menu    { cursor: context-menu; }\n.help            { cursor: help; }\n.pointer         { cursor: pointer; }\n.progress        { cursor: progress; }\n.wait            { cursor: wait; }\n.cell            { cursor: cell; }\n.crosshair       { cursor: crosshair; }\n.text            { cursor: text; }\n.vertical-text   { cursor: vertical-text; }\n.alias           { cursor: alias; }\n.copy            { cursor: copy; }\n.move            { cursor: move; }\n.no-drop         { cursor: no-drop; }\n.not-allowed     { cursor: not-allowed; }\n.all-scroll      { cursor: all-scroll; }\n.col-resize      { cursor: col-resize; }\n.row-resize      { cursor: row-resize; }\n.n-resize        { cursor: n-resize; }\n.e-resize        { cursor: e-resize; }\n.s-resize        { cursor: s-resize; }\n.w-resize        { cursor: w-resize; }\n.ns-resize       { cursor: ns-resize; }\n.ew-resize       { cursor: ew-resize; }\n.ne-resize       { cursor: ne-resize; }\n.nw-resize       { cursor: nw-resize; }\n.se-resize       { cursor: se-resize; }\n.sw-resize       { cursor: sw-resize; }\n.nesw-resize     { cursor: nesw-resize; }\n.nwse-resize     { cursor: nwse-resize; }<\/code><\/pre>\n\n\n\n<p>The cursor can also be an image:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.custom {\n  \/* The second value here is a fallback. *\/\n  cursor: url(images\/my-cursor.png), auto;\n\n  \/* You may need coordinates to adjust the pointer\n     for example, the custom cursor is circular and you want\n     the middle to be where you click *\/\n  cursor: url(target.svg) 15 15, move;\n}<\/code><\/pre>\n\n\n\n<p>Some WebKit only cursors:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">-webkit-zoom-in\n-webkit-zoom-out\n-webkit-zoom-grab\n-webkit-zoom-grabbing<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/css-ui-3\/#cursor\" rel=\"noopener\">CSS Basic User Interface Module Level 3<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/cursor\" rel=\"noopener\">Mozilla Docs<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css3-cursors\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">5<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">14<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"n nope\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"n nope\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>And for newer values, like <code>zoom-in<\/code> and <code>zoom-out<\/code>:<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css3-cursors-newer\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">2*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"n nope\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"n nope\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it&#8217;s only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the idea of certain functionality. So [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13915,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[668],"acf":[],"jetpack-related-posts":[{"id":9847,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/calculate-distance-between-mouse-and-element\/","url_meta":{"origin":14043,"position":0},"title":"Calculate Distance Between Mouse and Element","date":"June 19, 2011","format":false,"excerpt":"(function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()\/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()\/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; distance = calculateDistance($element, mX, mY); $distance.text(distance); }); })(); This code will calculate the\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3327,"url":"https:\/\/css-tricks.com\/snippets\/css\/give-clickable-elements-a-pointer-cursor\/","url_meta":{"origin":14043,"position":1},"title":"Give Clickable Elements a Pointer Cursor","date":"August 10, 2009","format":false,"excerpt":"a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class \"pointer\" for applying it to other clickable things as needed.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14200,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/hover\/","url_meta":{"origin":14043,"position":2},"title":":hover","date":"September 6, 2011","format":false,"excerpt":"The\u00a0:hover\u00a0pseudo class in CSS selects elements when the mouse cursor is current over them. It\u2019s commonly associated with link (<a>) elements. a:hover { color: green; text-decoration: underline overline; } So when a link like this is \u201chovered\u201d (like with a cursor on a device with a mouse): <a href=\"https:\/\/google.com\">Go to\u2026","rel":"","context":"In \"hover\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18170,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/","url_meta":{"origin":14043,"position":3},"title":"pointer-events","date":"June 20, 2013","format":false,"excerpt":"The pointer-events property allows for control over how HTML elements respond to mouse\/touch events \u2013 including CSS hover\/active states, click\/tap events in Javascript, and whether or not the cursor is visible. .avoid-clicks { pointer-events: none; } While the pointer-events property takes eleven possible values, all but three of them are\u2026","rel":"","context":"In \"pointer-events\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19143,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/move-cursor-to-end-of-input\/","url_meta":{"origin":14043,"position":4},"title":"Move Cursor to End of Input","date":"November 5, 2012","format":false,"excerpt":"Where el is a reference to an input or textarea. function moveCursorToEnd(el) { if (typeof el.selectionStart == \"number\") { el.selectionStart = el.selectionEnd = el.value.length; } else if (typeof el.createTextRange != \"undefined\") { el.focus(); var range = el.createTextRange(); range.collapse(false); range.select(); } }","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22430,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/move-cursor-to-end-of-textarea-or-input\/","url_meta":{"origin":14043,"position":5},"title":"Move Cursor To End of Textarea or Input","date":"July 16, 2013","format":false,"excerpt":"Code to move the cursor to the end of the current text within in the input, rather than the default (highlighting the text). Plugin format jQuery.fn.putCursorAtEnd = function() { return this.each(function() { \/\/ Cache references var $el = $(this), el = this; \/\/ Only focus if input isn't already if\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14043"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14043"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14043\/revisions"}],"predecessor-version":[{"id":341977,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14043\/revisions\/341977"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14043"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}