Cursor styles reference


by Jeremy Caudle
code

Today’s post is limited in terms of creativity, but I think it will be quite useful to me in the future. I even learned about a few cursor types I didn’t think I could display on a webpage.

Hover over the areas below to see the corresponding cursor

  • alias
  • all-scroll
  • cell
  • col-resize
  • context-menu
  • copy
  • crosshair
  • default
  • e-resize
  • ew-resize
  • grab
  • grabbing
  • help
  • move
  • n-resize
  • ne-resize
  • nesw-resize
  • no-drop
  • none
  • not-allowed
  • ns-resize
  • nw-resize
  • nwse-resize
  • pointer
  • progress
  • row-resize
  • s-resize
  • se-resize
  • sw-resize
  • text
  • unset
  • vertical-text
  • w-resize
  • wait
  • zoom-in
  • zoom-out

View the code:

HTML and JS 
<div class="code-block">
            <h2>Hover over the areas below to see the corresponding cursor</h2>
            <ul>
                <li class="alias">alias</li>
                <li class="all-scroll">all-scroll</li>
                <li class="cell">cell</li>
                <li class="col-resize">col-resize</li>
                <li class="context-menu">context-menu</li>
                <li class="copy">copy</li>
                <li class="crosshair">crosshair</li>
                <li class="default">default</li>
                <li class="e-resize">e-resize</li>
                <li class="ew-resize">ew-resize</li>
                <li class="grab">grab</li>
                <li class="grabbing">grabbing</li>
                <li class="help">help</li>
                <li class="move">move</li>
                <li class="n-resize">n-resize</li>
                <li class="ne-resize">ne-resize</li>
                <li class="nesw-resize">nesw-resize</li>
                <li class="no-drop">no-drop</li>
                <li class="none">none</li>
                <li class="not-allowed">not-allowed</li>
                <li class="ns-resize">ns-resize</li>
                <li class="nw-resize">nw-resize</li>
                <li class="nwse-resize">nwse-resize</li>
                <li class="pointer">pointer</li>
                <li class="progress">progress</li>
                <li class="row-resize">row-resize</li>
                <li class="s-resize">s-resize</li>
                <li class="se-resize">se-resize</li>
                <li class="sw-resize">sw-resize</li>
                <li class="text">text</li>
                <li class="unset">unset</li>
                <li class="vertical-text">vertical-text</li>
                <li class="w-resize">w-resize</li>
                <li class="wait">wait</li>
                <li class="zoom-in">zoom-in</li>
                <li class="zoom-out">zoom-out</li>
            </ul>
        </div>
CSS 
.code-block h2 {
                text-align: center;
            }

            @supports (display: grid) {

                .code-block {
                    display: grid;
                    margin: 0 auto;
                    place-items: center;
                    font-family: Helvetica, Arial, sans-serif;
                    max-width: 20em;
                }

    
                .code-block ul {
                    display: grid;
                    grid-template-columns: repeat(2, 50%);
                    gap: 1rem;
                    padding-left: 0;
                }

                @media (min-width: 21em) {
                    .code-block ul {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }

                @media (min-width: 41em) {
                    .code-block ul {
                        grid-template-columns: repeat(4, 1fr);
                    }
                }

                .code-block > ul > li {
                    display: grid;
                    place-items: center;
                    background-color: white;
                    border: 3px dotted #dddddd99;
                    padding: .25rem;
                    border-radius: .25rem;
                    text-align: center;
                    color: rgba(0, 177, 24, 0.788);
                    transition: background-color .125s ease-out;
                }

                .code-block > ul > li:hover {
                    background-color: rgb(255, 255, 115);
                }

            }
                .alias {cursor: alias;}
                .all-scroll {cursor: all-scroll;}
                .cell {cursor: cell;}
                .col-resize {cursor: col-resize;}
                .context-menu {cursor: context-menu;}
                .copy {cursor: copy;}
                .crosshair {cursor: crosshair;}
                .default {cursor: default;}
                .e-resize{cursor: e-resize;}
                .ew-resize{cursor: ew-resize; }
                .grab{cursor: grab;}
                .grabbing{cursor: grabbing;}
                .help{cursor: help;}
                .move{cursor: move;}
                .n-resize{cursor: n-resize;}
                .ne-resize{cursor: ne-resize;}
                .nesw-resize{cursor: nesw-resize;}
                .no-drop{cursor:no-drop;}
                .none{cursor: none;}
                .not-allowed{cursor:not-allowed;}
                .ns-resize{cursor:ns-resize;}
                .nw-resize{cursor:nw-resize;}
                .nwse-resize{cursor:nwse-resize;}
                .pointer{cursor:pointer;}
                .progress{cursor: progress;}
                .row-resize{cursor: row-resize;}
                .s-resize{cursor:s-resize;}
                .se-resize{cursor:se-resize;}
                .sw-resize{cursor:sw-resize;}
                .text{cursor: text;}
                .vertical-text{cursor:vertical-text;}
                .w-resize{cursor:w-resize;}
                .wait{cursor:wait;}
                .zoom-in{cursor:zoom-in;}
                .zoom-out{cursor: zoom-out;}
                .inherit{cursor: inherit;}
                .initial{cursor: initial;}
                .unset{cursor: unset;}

Tags