JUNCTION X: CSS3

<br />
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.</div>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…</div>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
CSS2 Cursor Styles</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
CSS2 offered relatively few options <em style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">(hover over any element to see how the cursor changes)</em>:</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: auto; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: auto</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: inherit; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: inherit</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: crosshair; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: crosshair</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: default; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: default</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: help; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: help</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: move; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: move</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: pointer; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: pointer </pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: progress; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: progress</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: text; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: text</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: wait; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: wait</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: e-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: e-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: ne-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: ne-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: nw-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: nw-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: n-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: n-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: se-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: se-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: sw-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: sw-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: s-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: s-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: w-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: w-resize</pre>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
CSS3 Cursor Styles</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:</div>
<div id="div-gpt-ad-1328644474660-10" style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; height: 90px; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 728px;">
<div id="div-gpt-ad-1328644474660-10_ad_container" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<ins style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: inline-table; height: 90px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; width: 728px;"><ins style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block; height: 90px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; width: 728px;"><iframe frameborder="0" height="90" id="google_ads_iframe_/7448792/InArticle_728x90_1_0" marginheight="0" marginwidth="0" name="google_ads_iframe_/7448792/InArticle_728x90_1_0" scrolling="no" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; left: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: absolute; top: 0px;" width="728"></iframe></ins></ins></div>
</div>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: none; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: none (not IE, Safari, Opera)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: context-menu; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: context-menu (not Firefox, Chrome)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: cell; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: cell (not Safari)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: vertical-text; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: vertical-text</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: alias; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: alias (not Safari)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: copy; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: copy (not Safari)</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: no-drop; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: no-drop</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: not-allowed; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: not-allowed</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: ew-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: ew-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: ns-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: ns-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: nesw-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: nesw-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: nwse-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: nwse-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: col-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: col-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: row-resize; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: row-resize</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: all-scroll; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: all-scroll</pre>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Browser-Specific Cursors</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-grab; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-grab; cursor: -moz-grab;</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-grabbing; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-grabbing; cursor: -moz-grabbing;</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-zoom-in; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-zoom-in; cursor: -moz-zoom-in;</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: -webkit-zoom-out; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: -webkit-zoom-out; cursor: -moz-zoom-out;</pre>
<h2 style="background-color: white; color: #0071d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.267em; line-height: 22px; margin-bottom: 0.579em; margin-left: 0px; margin-right: 0px; margin-top: 1.737em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Creating Your Own Cursor</h2>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Finally, you can create your own cursor graphic, e.g.</div>
<pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 1px; clear: both; color: #111111; cursor: auto; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.8em; line-height: 1.5em; margin-bottom: 1px; margin-top: 1px; overflow-x: auto; overflow-y: auto; padding-bottom: 0.667em; padding-left: 0.917em; padding-right: 0.917em; padding-top: 0.667em;">cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;</pre>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Note:</div>
<ol style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; margin-left: 1.467em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Internet Explorer requires a Windows cursor file (.cur).</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Firefox also requires a second non-URL cursor fallback value.</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">It’s not supported in Opera.</li>
<li style="cursor: pointer !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.</li>
</ol>
<div style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; margin-bottom: 1.467em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…</div>

มาดูว่าใน CSS3 มี Cursor Styles อะไรใหม่ๆบ้าง

The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in...

อ่านเพิ่มเติม »