Various Kinds of Mouse Pointers For HTML Controls

Introduction 

Every developer uses HTML controls for various tasks in HTML and the task can be any. So depending on the task, the developer uses the relevant HTML control but here is a question.

Question: Can you change the mouse pointer depending on the text and task of a control?

Answer: Yes, you can do this in HTML via CSS. There is a property named "cursor" to set the style of a HTML Control.

To learn more about this read further.

Step 1: Create a Page of HTML named "HtmlPage.html" and open it in any editor. The HTML will look like:

Note: Here I am using Visual Studio 2012 as an the editor.

Step 2: Now I will use only a Hyperlink to explain the various mouse pointers easily.

Add the anchor tag on the HTML page for creating the Hyperlink.

  1. <a href="#">My HyperLink</a>  

To add the mouse pointer, you need to just add the following code to the anchor tag -style="cursor: default;"

Here "default" is the default mouse pointer type.

Various Kinds of Mouse Pointers in HTML

  • Alias: It is used for a shortcut or to an alias somewhere.
    1. <a href="#" style="cursor:alias;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    alias tool tip

    After running the page, check the mouse pointer.

    alias hyperlink

  • All- Scroll: It is used to indicate to scroll in any direction.
    1. <a href="#" style="cursor: all-scroll;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    all scroll tool tip

    After running the page, check the mouse pointer.



  • Cell: It is used for a selected cell or set of cells.
    1. <a href="#" style="cursor: cell;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    cell tool tip

    After running the page, check the mouse pointer.



  • Col- Resize: It is used for a resize of the columns horizontally.
    1. <a href="#" style="cursor: col-resize;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    col resize tool tip

    After running the page, check the mouse pointer.



  • Copy: It indicates that some text has been copied.
    1. <a href="#" style="cursor: copy;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    copy tool tip

    After running the page, check the mouse pointer.



  • Crosshair: With a "+" sign.
    1. <a href="#" style="cursor: crosshair;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer

    crosshair tool tip

    After running the page, check the mouse pointer.



  • Help: It is used to indicate the help .
    1. <a href="#" style="cursor help;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    help tool tip

    After running the page, check the mouse pointer.



  • Move: It is used to indicate that something is moving.
    1. <a href="#" style="cursor: move;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    move tool tip

    After running the page, check the mouse pointer.



  • Pointer: It is used to indicate a pointer.
    1. <a href="#" style="cursor: pointer;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    pointer tool tip

    After running the page, check the mouse pointer.



  • Progress: It is used to indicate progress.
    1. <a href="#" style="cursor: progress;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    progress tool tip

    After running the page, check the mouse pointer.



  • No-Drop: It is used to indicate that dropping of a dragged item is not allowed.
    1. <a href="#" style="cursor: no-drop;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    no drop tool tip

    After running the page, check the mouse pointer.



  • Not-Allowed: It is used for a dragged item to indicate that dragging is not allowed.
    1. <a href="#" style="cursor: not-allowed;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    not allowed tool tip

    After running the page, check the mouse pointer.



  • Text: It is used for a dragged item to indicate the selection of text horizontally.
    1. <a href="#" style="cursor: text;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    text tool tip

    After running the page, check the mouse pointer.



  • Vertical -Text: It is used for a dragged item to indicate the selection of text vertically.
    1. <a href="#" style="cursor: vertical-text;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    vertical text tool tip

    After running the page, check the mouse pointer.



  • Wait: It is used to indicate that the program is busy and the user should wait.
    1. <a href="#" style="cursor: wait;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    wait tool tip

    After running the page, check the mouse pointer.



  • Zoom-In: It is used to indicate zoom-in.
    1. <a href="#" style="cursor: zoom-in;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    zoom in tool tip

    After running the page, check the mouse pointer.



  • Zoom-Out: It is used to indicate zoom-out.
    1. <a href="#" style="cursor: zoom-out;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    zoom out tool tip

    After running the page, check the mouse pointer.



  • None: There will be no pointer shown.
    1. <a href="#" style="cursor: none;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    no cursor

    After running the page, check the mouse pointer.

    nocursor

Note: You can do the same thing to any control like input type (text, button and so on), textarea and many more.

Conclusion: I hope now you can change the mouse pointer depending on the task and control.

Up Next
    Ebook Download
    View all
    Learn
    View all