Posted in css
4422
5:44 am, February 27, 2024
 

css cursor types testing

testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system. 

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor 

HTML

<table class="table table-striped standard-table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Keyword</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr style="cursor: auto;">
<th rowspan="3" scope="row">General</th>
<td><code>auto</code></td>
<td>The UA will determine the cursor to display based on the current context. E.g., equivalent to <code>text</code> when hovering text.</td>
</tr>
<tr style="cursor: default;">
<td><code>default</code></td>
<td>The platform-dependent default cursor. Typically an arrow.</td>
</tr>
<tr style="cursor: none;">
<td><code>none</code></td>
<td>No cursor is rendered.</td>
</tr>
<tr style="cursor: context-menu;">
<th style="cursor: auto;" rowspan="5" scope="row">Links &amp; status</th>
<td><code>context-menu</code></td>
<td>A context menu is available.</td>
</tr>
<tr style="cursor: help;">
<td><code>help</code></td>
<td>Help information is available.</td>
</tr>
<tr style="cursor: pointer;">
<td><code>pointer</code></td>
<td>The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</td>
</tr>
<tr style="cursor: progress;">
<td><code>progress</code></td>
<td>The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</td>
</tr>
<tr style="cursor: wait;">
<td><code>wait</code></td>
<td>The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</td>
</tr>
<tr style="cursor: cell;">
<th style="cursor: auto;" rowspan="4" scope="row">Selection</th>
<td><code>cell</code></td>
<td>The table cell or set of cells can be selected.</td>
</tr>
<tr style="cursor: crosshair;">
<td><code>crosshair</code></td>
<td>Cross cursor, often used to indicate selection in a bitmap.</td>
</tr>
<tr style="cursor: text;">
<td><code>text</code></td>
<td>The text can be selected. Typically the shape of an I-beam.</td>
</tr>
<tr style="cursor: vertical-text;">
<td><code>vertical-text</code></td>
<td>The vertical text can be selected. Typically the shape of a sideways I-beam.</td>
</tr>
<tr style="cursor: alias;">
<th style="cursor: auto;" rowspan="7" scope="row">Drag &amp; drop</th>
<td><code>alias</code></td>
<td>An alias or shortcut is to be created.</td>
</tr>
<tr style="cursor: copy;">
<td><code>copy</code></td>
<td>Something is to be copied.</td>
</tr>
<tr style="cursor: move;">
<td><code>move</code></td>
<td>Something is to be moved.</td>
</tr>
<tr style="cursor: no-drop;">
<td><code>no-drop</code></td>
<td>An item may not be dropped at the current location.<br />[Firefox bug 275173](https://bugzil.la/275173): On Windows and macOS, <code>no-drop</code> is the same as <code>not-allowed</code>.</td>
</tr>
<tr style="cursor: not-allowed;">
<td><code>not-allowed</code></td>
<td>The requested action will not be carried out.</td>
</tr>
<tr style="cursor: grab;">
<td><code>grab</code></td>
<td>Something can be grabbed (dragged to be moved).</td>
</tr>
<tr style="cursor: grabbing;">
<td><code>grabbing</code></td>
<td>Something is being grabbed (dragged to be moved).</td>
</tr>
<tr style="cursor: all-scroll;">
<th style="cursor: auto;" rowspan="15" scope="row">Resizing &amp; scrolling</th>
<td><code>all-scroll</code></td>
<td>Something can be scrolled in any direction (panned).<br />[Firefox bug 275174](https://bugzil.la/275174): On Windows, <code>all-scroll</code> is the same as <code>move</code>.</td>
</tr>
<tr style="cursor: col-resize;">
<td><code>col-resize</code></td>
<td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</td>
</tr>
<tr style="cursor: row-resize;">
<td><code>row-resize</code></td>
<td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
</tr>
<tr style="cursor: n-resize;">
<td><code>n-resize</code></td>
<td style="cursor: auto;" rowspan="8">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br />In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</td>
</tr>
<tr style="cursor: e-resize;">
<td><code>e-resize</code></td>
</tr>
<tr style="cursor: s-resize;">
<td><code>s-resize</code></td>
</tr>
<tr style="cursor: w-resize;">
<td><code>w-resize</code></td>
</tr>
<tr style="cursor: ne-resize;">
<td><code>ne-resize</code></td>
</tr>
<tr style="cursor: nw-resize;">
<td><code>nw-resize</code></td>
</tr>
<tr style="cursor: se-resize;">
<td><code>se-resize</code></td>
</tr>
<tr style="cursor: sw-resize;">
<td><code>sw-resize</code></td>
</tr>
<tr style="cursor: ew-resize;">
<td><code>ew-resize</code></td>
<td style="cursor: auto;" rowspan="4">Bidirectional resize cursor.</td>
</tr>
<tr style="cursor: ns-resize;">
<td><code>ns-resize</code></td>
</tr>
<tr style="cursor: nesw-resize;">
<td><code>nesw-resize</code></td>
</tr>
<tr style="cursor: nwse-resize;">
<td><code>nwse-resize</code></td>
</tr>
<tr style="cursor: zoom-in;">
<th style="cursor: auto;" rowspan="2" scope="row">Zooming</th>
<td><code>zoom-in</code></td>
<td style="cursor: auto;" rowspan="2">
<p>Something can be zoomed (magnified) in or out.</p>
</td>
</tr>
<tr style="cursor: zoom-out;">
<td><code>zoom-out</code></td>
</tr>
</tbody>
</table>
Category Keyword Description
General auto The UA will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
default The platform-dependent default cursor. Typically an arrow.
none No cursor is rendered.
Links & status context-menu A context menu is available.
help Help information is available.
pointer The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
progress The program is busy in the background, but the user can still interact with the interface (in contrast to wait).
wait The program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
Selection cell The table cell or set of cells can be selected.
crosshair Cross cursor, often used to indicate selection in a bitmap.
text The text can be selected. Typically the shape of an I-beam.
vertical-text The vertical text can be selected. Typically the shape of a sideways I-beam.
Drag & drop alias An alias or shortcut is to be created.
copy Something is to be copied.
move Something is to be moved.
no-drop An item may not be dropped at the current location.
[Firefox bug 275173](https://bugzil.la/275173): On Windows and macOS, no-drop is the same as not-allowed.
not-allowed The requested action will not be carried out.
grab Something can be grabbed (dragged to be moved).
grabbing Something is being grabbed (dragged to be moved).
Resizing & scrolling all-scroll Something can be scrolled in any direction (panned).
[Firefox bug 275174](https://bugzil.la/275174): On Windows, all-scroll is the same as move.
col-resize The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resize The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resize Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize.
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize Bidirectional resize cursor.
ns-resize
nesw-resize
nwse-resize
Zooming zoom-in

Something can be zoomed (magnified) in or out.

zoom-out

View Statistics
This Week
47
This Month
407
This Year
4426

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in css
flex to align pagination in list format make an image or element grayscale switch on mouse over rotate an element when its hover rotate an element when its selected Left Fixed nav with right fluid content css html vertical center css cursor types testing CSS Object Fit for Image fill rather than using background image on a div flip card animation 3d front and back css html six box grid css html custom no gap four box grid css html custom Kinda Crappy 3D button code 4 box custom grid css layout stack on mobile 1024 lower use an image in your list items ol ul li css grid container with 4 auto columns select something with custom data attribute css rainbow text background clip with linear gradient content-visibility and contain-intrinsic-size for page load rendering speed increase set a css grid to auto to make it stack on mobile truncate text with line clamp allow a certain number of lines using the :user-valid CSS pseudo-class add a button to an existing link using :after css bouncing loader animation in css center a box in the middle of the screen highlight a button with an animation css add an outline to everything! hide the first h3 tag on the page with css center align vertical 2 items in a container flex simple javascript no library accordion button zoom effect with expanding background scroll left animation using css counter-increment to add numbering to elements hidden scroll anchor for custom scroll position ken burns slow image zoom using a radial gradient for background overlay change selected color on input elements css animated duck on footer using filter grayscale to make an image dark bootstrap dark mode twitter icon font awesome how to bundle css files together using windows or mac button with separated chevron vertically align text within a fixed height div using flex how to view a web page in its printer format white space break word css roboto and poppins fonts include quick code CSS Drawing - Beach Scene 404 Error Page Codepen right align something in its element hide the third row in a table with css
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Random CSS Property

inset-inline-end

The inset-inline-end CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.
inset-inline-end css reference