Vertical-text: the same as the text cursor type but this is used for vertical-text. Text: one of the most used cursor types, it indicates to the user the text may be selected. SelectionĬell: a thick plus-sign with a dot in the middle, it shows that a cell or set of cells may be selected.Ĭrosshair: a basic crosshair, normally used to indicate a two dimensional bitmap selection mode. Typically rendered as a watch or hourglass. Wait: used when the web application is busy and needs to tell the user to wait until the process has finished. The progress renders as a spinning beach ball on Mac or an arrow with a watch or hourglass on Windows. The wait is different as that is saying to the user to stop and wait for the action to finish. Progress: indicating that something is happening or being processed but you can still use the web application. Pointer: typically used when there is a link, the pointer looks like a hand with the index finger pointing. Help: similar styling to the context-menu but with a question mark or a ballon next to the arrow. Normally the render cursor is an arrow with a small menu graphic next to the arrow. None: no cursor is shown for the element Links and statusĬontext-menu: can be used when an object is under the cursor. webkit-zoom-grabbing List of CSS cursors General purposeĪuto: User-agent (UA) decides what to display based on the context, for example it is auto behaves as ‘text’ when over selectable text or editable elements and then ‘default’ otherwiseĭefault: the platform determine the default cursor, typically this is an arrow
customcursor Browser-Specific CursorsĪdditionally there is a few browser specific options which are: -webkit-zoom-in You can also add a second custom file with a comma-seperated list and then finally end this list with a generic cusor such as pointer, default or auto, as shown in the example below. How do I add a custom cursor in CSS?īy using the url() value we can display a custom image. From a UX perspective it is essential to utilise this property to convey meaning to the user through visual feedback cues.Īs well as the standard cursors there is custom option which we’ll look at next.
Using the correct type of cursors is becoming more important than ever with the increase in web applications. This CSS property is only for devices that use a mouse so it wouldn’t apply to a phone or a tablet because there is no cursor. The cursor property controls the styling of the mouse cursor that is shown to the user when the mouse is pointing on an element.
0 kommentar(er)
