Compare Revisions

cursor

Revision 20459:

Revision 20459 by Taken on

Revision 20460:

Revision 20460 by CHaoSlayeR on

Title:
CSS cursor
CSS cursor
Slug:
CSS/cursor
CSS/cursor
Tags:
css, NeedsBrowserCompatibility, "CSS Reference", NeedsMobileBrowserCompatibility
css, NeedsBrowserCompatibility, "CSS Reference", NeedsMobileBrowserCompatibility
Content:

Revision 20459
Revision 20460
n34cursor: std-cursor-name> | [<url> ,]*  <url> | {{tn34cursor: <std-cursor-name> | <url> [<x> <y&gt
>emplate.Cssxref("inherit")}} ;>;]? [, <url> [<x> <y>]?]* | {{template.Cssxref(
 >"inherit")}} ;
n37cursor: [<url> ,]*  <std-cursor-name> ;n37cursor: [<url> [<x> <y>]?,]*  <std-cursor-na
 >me> ;
n44        <url> n44        <url> {{mediawiki.external('<x> <y>')}}
 >? 
n47        URL of custom cursor. More than one URL may be provided an47        URL of custom cursor plus optional position. More than on
>s fallback, in case some cursor image types are not supported. A >e URL may be provided as fallback, in case some cursor image type
>non-URL fallback (one of the other values) must be at the end of >s are not supported. A non-URL fallback (one of the other values)
>the fallback list. See <a href="en/Using_URL_values_for_the_curso> must be at the end of the fallback list. See <a href="en/Using_U
>r_property">Using URL values for the cursor property</a> for more>RL_values_for_the_cursor_property">Using URL values for the curso
> details.>r property</a> for more details.
n53        a standard cursor name <code>auto, crosshair, default, pon53        one of cursor names listed in the following tables.
>inter, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, 
> sw-resize, s-resize, w-resize, text, wait, help, progress, copy, 
> alias, context-menu, cell, not-allowed, col-resize, row-resize,  
>no-drop, vertical-text, all-scroll, nesw-resize, nwse-resize, ns- 
>resize, ew-resize, none</code> 
54      </dd>
55      <dt>
56        <code>default</code>&nbsp;
57      </dt>
58      <dd>
59        default cursor (typically an arrow)
60      </dd>
61      <dt>
62        <code>auto</code>&nbsp;
63      </dt>
64      <dd>
65        equivalent to <code>text</code> when over text and <code>
>default</code> otherwise 
66      </dd>
67      <dt>
68        <code>crosshair</code>&nbsp;
69      </dt>
70      <dd>
71        cross cursor, often used to indicate selection in a bitma
>p 
72      </dd>
73      <dt>
74        <code>pointer</code>&nbsp;
75      </dt>
76      <dd>
77        cursor used when over links (typically a hand)
78      </dd>
79      <dt>
80        <code>move</code>&nbsp;
81      </dt>
82      <dd>
83        move cursor
84      </dd>
85      <dt>
86        <code>e-resize</code>&nbsp;
87      </dt>
88      <dd>
89        cursor for resizing the right edge of a box
90      </dd>
91      <dt>
92        <code>ne-resize</code>&nbsp;
93      </dt>
94      <dd>
95        cursor for resizing the top right corner of a box
96      </dd>
97      <dt>
98        <code>nw-resize</code>&nbsp;
99      </dt>
100      <dd>
101        cursor for resizing the top left corner of a box
102      </dd>
103      <dt>
104        <code>n-resize</code>&nbsp;
105      </dt>
106      <dd>
107        cursor for resizing the top edge of a box
108      </dd>
109      <dt>
110        <code>se-resize</code>&nbsp;
111      </dt>
112      <dd>
113        cursor for resizing the bottom right corner of a box
114      </dd>
115      <dt>
116        <code>sw-resize</code>&nbsp;
117      </dt>
118      <dd>
119        cursor for resizing the bottom left corner of a box
120      </dd>
121      <dt>
122        <code>s-resize</code>&nbsp;
123      </dt>
124      <dd>
125        cursor for resizing the bottom edge of a box
126      </dd>
127      <dt>
128        <code>w-resize</code>&nbsp;
129      </dt>
130      <dd>
131        cursor for resizing the left edge of a box
132      </dd>
133      <dt>
134        <code>text</code>&nbsp;
135      </dt>
136      <dd>
137        cursor indicating text can be selected (typically an I-be
>am) 
138      </dd>
139      <dt>
140        <code>wait</code>&nbsp;
141      </dt>
142      <dd>
143        cursor indicating the program is busy (sometimes an hourg
>lass or a watch) 
144      </dd>
145      <dt>
146        <code>help</code>&nbsp;
147      </dt>
148      <dd>
149        cursor indicating help is available
150      </dd>
151      <dt>
152        <code>progress</code>&nbsp;
153      </dt>
154      <dd>
155        cursor indicating that the program is busy but the user c
>an still interact with it (unlike for <code>busy</code>) 
156      </dd>
157      <dt>
158        <code>copy</code>&nbsp;
159      </dt>
160      <dd>
161        cursor showing something that can be copied
162      </dd>
163      <dt>
164        <code>alias</code>&nbsp;
165      </dt>
166      <dd>
167        cursor indicating an alias or shortcut is to be created
168      </dd>
169      <dt>
170        <code>context-menu</code>&nbsp;
171      </dt>
172      <dd>
173        cursor indicating that a context menu is available under 
>the cursor 
174      </dd>
175      <dt>
176        <code>cell</code>&nbsp;
177      </dt>
178      <dd>
179        cursor indicating that cells can be selected
180      </dd>
181      <dt>
182        <code>not-allowed</code>&nbsp;
183      </dt>
184      <dd>
185        cursor showing that something cannot be done
186      </dd>
187      <dt>
188        <code>col-resize</code>&nbsp;
189      </dt>
190      <dd>
191        cursor for resizing columns horizontally
192      </dd>
193      <dt>
194        <code>row-resize</code>&nbsp;
195      </dt>
196      <dd>
197        cursor for resizing rows vertically
198      </dd>
199      <dt>
200        <code>no-drop</code>&nbsp;
201      </dt>
202      <dd>
203        cursor showing that a drop is not allowed at the current 
>location 
204      </dd>
205      <dt>
206        <code>vertical-text</code>&nbsp;
207      </dt>
208      <dd>
209        cursor indicating that vertical text can be selected (typ
>ically a sideways I-beam) 
210      </dd>
211      <dt>
212        <code>all-scroll</code>&nbsp;
213      </dt>
214      <dd>
215        cursor showing that something can be scrolled in any dire
>ction (panned) 
216      </dd>
217      <dt>
218        <code>nesw-resize</code>&nbsp;
219      </dt>
220      <dd>
221        cursor for resizing in the top-right or bottom-left direc
>tions 
222      </dd>
223      <dt>
224        <code>nwse-resize</code>&nbsp;
225      </dt>
226      <dd>
227        cursor for resizing in the top-left or bottom-right direc
>tions 
228      </dd>
229      <dt>
230        <code>ns-resize</code>&nbsp;
231      </dt>
232      <dd>
233        cursor for resizing up or down
234      </dd>
235      <dt>
236        <code>ew-resize</code>&nbsp;
237      </dt>
238      <dd>
239        cursor for resizing left or right
240      </dd>
241      <dt>
242        <code>none</code>&nbsp;
243      </dt>
244      <dd>
245        no cursor is rendered {{template.Fx_minversion_inline(3)}
>} 
nn56    <h4 name="Supported_CSS_standard_values">
57      Supported CSS standard values
58    </h4>
59    <table class="standard-table">
60      <tbody>
61        <tr>
62          <th>
63            Category
64          </th>
65          <th>
66            CSS name
67          </th>
68          <th>
69            Description
70          </th>
71        </tr>
72        <tr>
73          <td rowspan="3">
74            General
75          </td>
76          <td style="cursor:auto;">
77            <code>auto</code>
78          </td>
79          <td>
80            the browser (user agent) determines the cursor to dis
 >play based on the current context<br>
81            E.g. equivalent to <code>text</code> when hovering te
 >xt
82          </td>
83        </tr>
84        <tr>
85          <td style="cursor:default;">
86            <code>default</code>
87          </td>
88          <td>
89            default cursor (typically an arrow)
90          </td>
91        </tr>
92        <tr>
93          <td style="cursor:none;">
94            <code>none</code>
95          </td>
96          <td>
97            no cursor is rendered {{template.Fx_minversion_inline
 >(3)}}
98          </td>
99        </tr>
100        <tr>
101          <td rowspan="5">
102            Links &amp; status
103          </td>
104          <td style="cursor:context-menu;">
105            <code>context-menu</code>
106          </td>
107          <td>
108            cursor indicating that a context menu is available un
 >der the cursor
109          </td>
110        </tr>
111        <tr>
112          <td style="cursor:help;">
113            <code>help</code>
114          </td>
115          <td>
116            cursor indicating help is available
117          </td>
118        </tr>
119        <tr>
120          <td style="cursor:pointer;">
121            <code>pointer</code>
122          </td>
123          <td>
124            cursor used when over links (typically a hand)
125          </td>
126        </tr>
127        <tr>
128          <td style="cursor:progress;">
129            <code>progress</code>
130          </td>
131          <td>
132            cursor indicating that the program is busy in the bac
 >kground but the user can still interact with the interface (unlik
 >e for <code>wait</code>)
133          </td>
134        </tr>
135        <tr>
136          <td style="cursor:wait;">
137            <code>wait</code>
138          </td>
139          <td>
140            cursor indicating the program is busy (sometimes an h
 >ourglass or a watch)
141          </td>
142        </tr>
143        <tr>
144          <td rowspan="4">
145            Selection
146          </td>
147          <td style="cursor:cell;">
148            <code>cell</code>
149          </td>
150          <td>
151            cursor indicating that cells can be selected
152          </td>
153        </tr>
154        <tr>
155          <td style="cursor:crosshair;">
156            <code>crosshair</code>
157          </td>
158          <td>
159            cross cursor, often used to indicate selection in a b
 >itmap
160          </td>
161        </tr>
162        <tr>
163          <td style="cursor:text;">
164            <code>text</code>
165          </td>
166          <td>
167            cursor indicating text can be selected (typically an 
 >I-beam)
168          </td>
169        </tr>
170        <tr>
171          <td style="cursor:vertical-text;">
172            <code>vertical-text</code>
173          </td>
174          <td>
175            cursor indicating that vertical text can be selected 
 >(typically a sideways I-beam)
176          </td>
177        </tr>
178        <tr>
179          <td rowspan="5">
180            Drag and drop
181          </td>
182          <td style="cursor:alias;">
183            <code>alias</code>
184          </td>
185          <td>
186            cursor indicating an alias or shortcut is to be creat
 >ed
187          </td>
188        </tr>
189        <tr>
190          <td style="cursor:copy;">
191            <code>copy</code>
192          </td>
193          <td>
194            cursor indicating that something can be copied
195          </td>
196        </tr>
197        <tr>
198          <td style="cursor:move;">
199            <code>move</code>
200          </td>
201          <td>
202            the hovered object may be moved
203          </td>
204        </tr>
205        <tr>
206          <td style="cursor:no-drop;">
207            <code>no-drop</code>
208          </td>
209          <td>
210            cursor showing that a drop is not allowed at the curr
 >ent location
211          </td>
212        </tr>
213        <tr>
214          <td style="cursor:not-allowed;">
215            <code>not-allowed</code>
216          </td>
217          <td>
218            cursor showing that something cannot be done
219          </td>
220        </tr>
221        <tr>
222          <td rowspan="15">
223            Resize &amp; scrolling
224          </td>
225          <td style="cursor:all-scroll;">
226            <code>all-scroll</code>
227          </td>
228          <td>
229            cursor showing that something can be scrolled in any 
 >direction (panned)
230          </td>
231        </tr>
232        <tr>
233          <td style="cursor:col-resize;">
234            <code>col-resize</code>
235          </td>
236          <td>
237            cursor for resizing columns horizontally
238          </td>
239        </tr>
240        <tr>
241          <td style="cursor:e-resize;">
242            <code>e-resize</code>
243          </td>
244          <td>
245            cursor for resizing the right edge of a box
246          </td>
247        </tr>
248        <tr>
249          <td style="cursor:ew-resize;">
250            <code>ew-resize</code>
251          </td>
252          <td>
253            cursor for resizing left or right
254          </td>
255        </tr>
256        <tr>
257          <td style="cursor:n-resize;">
258            <code>n-resize</code>
259          </td>
260          <td>
261            cursor for resizing the top edge of a box
262          </td>
263        </tr>
264        <tr>
265          <td style="cursor:ne-resize;">
266            <code>ne-resize</code>
267          </td>
268          <td>
269            cursor for resizing the top right corner of a box
270          </td>
271        </tr>
272        <tr>
273          <td style="cursor:nesw-resize;">
274            <code>nesw-resize</code>
275          </td>
276          <td>
277            cursor for resizing in the top-right or bottom-left d
 >irections
278          </td>
279        </tr>
280        <tr>
281          <td style="cursor:ns-resize;">
282            <code>ns-resize</code>
283          </td>
284          <td>
285            cursor for resizing up or down
286          </td>
287        </tr>
288        <tr>
289          <td style="cursor:nw-resize;">
290            <code>nw-resize</code>
291          </td>
292          <td>
293            cursor for resizing the top left corner of a box
294          </td>
295        </tr>
296        <tr>
297          <td style="cursor:nwse-resize;">
298            <code>nwse-resize</code>
299          </td>
300          <td>
301            cursor for resizing in the top-left or bottom-right d
 >irections
302          </td>
303        </tr>
304        <tr>
305          <td style="cursor:row-resize;">
306            <code>row-resize</code>
307          </td>
308          <td>
309            cursor for resizing rows vertically
310          </td>
311        </tr>
312        <tr>
313          <td style="cursor:s-resize;">
314            <code>s-resize</code>
315          </td>
316          <td>
317            cursor for resizing the bottom edge of a box
318          </td>
319        </tr>
320        <tr>
321          <td style="cursor:se-resize;">
322            <code>se-resize</code>
323          </td>
324          <td>
325            cursor for resizing the bottom right corner of a box
326          </td>
327        </tr>
328        <tr>
329          <td style="cursor:sw-resize;">
330            <code>sw-resize</code>
331          </td>
332          <td>
333            cursor for resizing the bottom left corner of a box
334          </td>
335        </tr>
336        <tr>
337          <td style="cursor:w-resize;">
338            <code>w-resize</code>
339          </td>
340          <td>
341            cursor for resizing the left edge of a box
342          </td>
343        </tr>
344      </tbody>
345    </table>
346    <h4 name="Extended_Gecko_CSS_values">
347      Extended Gecko CSS values
348    </h4>
349    <table class="standard-table">
350      <tbody>
351        <tr>
352          <th>
353            CSS name
354          </th>
355          <th>
356            Description
357          </th>
358          <th>
359            Deprecation
360          </th>
361        </tr>
362        <tr>
363          <td style="cursor:-moz-alias;">
364            <code><a href="en/CSS/-moz-alias">-moz-alias</a></cod
 >e>
365          </td>
366          <td>
367            replaced by standard value <code>alias</code> as desc
 >ribed in the previous table
368          </td>
369          <td>
370            Gecko 1.8a6
371          </td>
372        </tr>
373        <tr>
374          <td style="cursor:-moz-cell;">
375            <code><a href="en/CSS/-moz-cell">-moz-cell</a></code>
376          </td>
377          <td>
378            replaced by standard value <code>cell</code> as descr
 >ibed in the previous table
379          </td>
380          <td>
381            Gecko 1.8a6
382          </td>
383        </tr>
384        <tr>
385          <td style="cursor:-moz-context-menu;">
386            <code><a href="en/CSS/-moz-context-menu">-moz-context
 >-menu</a></code>
387          </td>
388          <td>
389            replaced by standard value <code>context-menu</code> 
 >as described in the previous table
390          </td>
391          <td>
392            Gecko 1.8a6
393          </td>
394        </tr>
395        <tr>
396          <td style="cursor:-moz-copy;">
397            <code><a href="en/CSS/-moz-copy">-moz-copy</a></code>
398          </td>
399          <td>
400            replaced by standard value <code>copy</code> as descr
 >ibed in the previous table
401          </td>
402          <td>
403            Gecko 1.8a6
404          </td>
405        </tr>
406        <tr>
407          <td style="cursor:-moz-grab;">
408            <code><a href="en/CSS/-moz-grab">-moz-grab</a></code>
409          </td>
410          <td>
411            a cursor value that should indicate that an element o
 >r an object in a webpage can be grabbed
412          </td>
413          <td></td>
414        </tr>
415        <tr>
416          <td style="cursor:-moz-grabbing;">
417            <code><a href="en/CSS/-moz-grabbing">-moz-grabbing</a
 >></code>
418          </td>
419          <td>
420            a cursor value that should indicate that an element o
 >r an object is currently being grabbed
421          </td>
422          <td></td>
423        </tr>
424        <tr>
425          <td style="cursor:-moz-spinning;">
426            <code><a href="en/CSS/-moz-spinning">-moz-spinning</a
 >></code>
427          </td>
428          <td>
429            replaced by standard value <code>progress</code> as d
 >escribed in the previous table
430          </td>
431          <td>
432            Gecko 1.7.1
433          </td>
434        </tr>
435        <tr>
436          <td style="cursor:-moz-zoom-in;">
437            <code><a href="en/CSS/-moz-zoom-in">-moz-zoom-in</a><
 >/code>
438          </td>
439          <td>
440            used to indicate that an element or an object in a we
 >bpage is actually being resized, enlarged or is actually being ma
 >gnified
441          </td>
442          <td></td>
443        </tr>
444        <tr>
445          <td style="cursor:-moz-zoom-out;">
446            <code><a href="en/CSS/-moz-zoom-out">-moz-zoom-out</a
 >></code>
447          </td>
448          <td>
449            used to indicate that an element or an object in a we
 >bpage is actually being resized, reduced or is actually being zoo
 >med out
450          </td>
451          <td></td>
452        </tr>
453      </tbody>
454    </table>
n296            Lowest Versionn503            Lowest Version (<code>&lt;std-cursor-name&gt;</code>)
504          </th>
505          <th>
506            Lowest Version (<code>&lt;url&gt;</code>)
nn516          <td>
517            6 (only <code>.cur</code> files)
518          </td>
nn525            1.0
526          </td>
527          <td>
nn538          <td>
539            8
540          </td>
tt548          </td>
549          <td>
550            -
551          </td>
552        </tr>
553        <tr>
554          <td>
555            Konqueror
556          </td>
557          <td>
558            3.1
559          </td>
560          <td>
561            3.1
562          </td>
563        </tr>
564        <tr>
565          <td>
566            Safari
567          </td>
568          <td>
569            1.2
570          </td>
571          <td>
572            1.2
573          </td>
574        </tr>
575        <tr>
576          <td>
577            Safari (Win)
578          </td>
579          <td>
580            3.0
581          </td>
582          <td>
583            3.0

Back to History