#Css cursors windows#
All cursors will be displayed according to your operating system, so Windows users automatically see Windows versions of the icons, for example - you don’t need to do anything special to make them look right for each user. Then add the help class to whatever links you’d like to be affected, like so:īelow is a listing of all of the cursors you can choose from in the CSS specification. If you want to add it to an entire class of links, add this line of CSS to your stylesheet: You can change the cursor on just one link by adding the property via the style attribute: Sometimes rendered as a spinning, striped ball.You can change the cursor on any element you want, though CSS cursors are used most frequently on links. Slightly different from the ‘wait’ value – ‘wait’ should indicate that no user interaction with the program is possible while the cursor is in that state, whereas ‘spinning’ indicates that the user may still interact with the program. Spinning: Used to indicate that processing is being done by the program. Often rendered as a closed/clenched hand. Grabbing: Used to indicate that content is in the act of being “grabbed”. Grab: Used to indicate that content is “grabbable”.
#Css cursors plus#
Often rendered as an arrow with a small plus next to it.Ĭount-down: Used to indicate a “count-down” operation by a program.Ĭount-up: Used to indicate a “count-up” operation by a program.Ĭount-up-down: Used to indicate a program is “counting-up” and “counting-down” in succession operation in a program. Often rendered as a thick plus-sign, possibly having a dot in the middle.Ĭopy: Used to indicate that content will be copied. Often represented as an arrow with a small curved arrow next to it.Ĭell: Used to indicate that one or more “cells” (as in a spreadsheet) may be selected. Represented as a horizontal I-bar.Īlias: Use a cursor to indicate a shortcut or alias to another object. Vertical-text: Used to represent editable vertical content. Represented as an arrow with an hourglass next to it. Progress: Indicates that a process is running in the background, which will not affect user interaction with the system. Represented as a circle with a slash through it. Not-allowed: Used to indicate that a requested action can not be performed. Represented as a hand next to a small circle with a slash through it. No-drop: Used to indicate that a dragged item cannot be dropped at the current cursor position. Represented with a horizontal bar in the middle of two arrows pointing in opposite up/down directions. Row-resize: Used to indicate that a row or item can be vertically re-sized. Represented with a vertical bar in the middle of two arrows pointing in opposite left/right directions. Used to indicate that content can be scrolled in any direction.Ĭol-resize: Used to indicate that a column can be horizontally re-sized. Often represented as a question mark or balloon.Īll-scroll: Use an up/down/left/right arrow with a dot in the middle. Help: Used to indicate that help is available for the element. Usually represented by an hourglass or clock. Wait: Used to indicate that the user must wait because the program is busy. Text: Used to indicate that content is selectable. Move: Used to indicate when something is movable. Pointer: Used to present an actively selectable element, such as a hyperlink. Values represent directions relative to up/north.Ĭrosshair: Usually resembles a plus sign (‘+’). N-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize: Used to indicate when an edge of a box is to be moved/re-sized. If none of the URL-defined cursors can be used, a generic cursor indicated at the end of the list is used. If that is not available, an attempt is made for the the next one indicated to the right, and so on. If multiple URLs are listed for a cursor, the leftmost one is used. : URL of a custom cursor to be used for the specified selector. Often an arrow.Īuto: Browser determines what cursor to display according to context. Inherit: Explicitly sets the value of this property to that of the parent.ĭefault: Browser default cursor. Some elements that use a different default cursor (eg: hyperlinks, text entry elements) will override the parent cursor type by default unless explicitly set to “inherit”. Note: Although the CSS spec says that this property is inherited, there are some cases in browsers where it is not explicitly so. Browsers should attempt to first use the cursor indicated on the left, working to the right until it has a cursor it can use. Accepts a comma separated list of the below values.
This property controls the type of cursor that is used when a pointing device is over an element.
0 kommentar(er)
