The Cursors of CSS Property

Customizing a mouse cursor with CSS is pretty simple, as CSS already has a property to handle this. All we need to do is identify this property and use it.

Before we go to a practical example, let’s look at the values associated with the CSS cursor property. While most developers just use a few important ones, there are more we should look at.

HTML Code:

<div class="container">
  <h1>The Cursors of CSS Effects</h1>
  <div class="boxs">
    <div class="box auto">auto</div>
    <div class="box default">default</div>
    <div class="box none">none</div>
    <div class="box context-menu">context-menu</div>
    <div class="box help">help</div>
    <div class="box pointer">pointer</div>
    <div class="box progress">progress</div>
    <div class="box wait">wait</div>
    <div class="box cell">cell</div>
    <div class="box crosshair">crosshair</div>
    <div class="box text">text</div>
    <div class="box vertical-text">vertical-text</div>
    <div class="box alias">alias</div>
    <div class="box copy">copy</div>
    <div class="box move">move</div>
    <div class="box no-drop">no-drop</div>
    <div class="box not-allowed">not-allowed</div>
    <div class="box all-scroll">all-scroll</div>
    <div class="box col-resize">col-resize</div>
    <div class="box row-resize">row-resize</div>
    <div class="box n-resize">n-resize</div>
    <div class="box s-resize">s-resize</div>
    <div class="box e-resize">e-resize</div>
    <div class="box w-resize">w-resize</div>
    <div class="box ns-resize">ns-resize</div>
    <div class="box ew-resize">ew-resize</div>
    <div class="box ne-resize">ne-resize</div>
    <div class="box nw-resize">nw-resize</div>
    <div class="box se-resize">se-resize</div>
    <div class="box sw-resize">sw-resize</div>
    <div class="box nesw-resize">nesw-resize</div>
    <div class="box nwse-resize">nwse-resize</div>
    <div class="box zoom-in">zoom-in</div>
    <div class="box zoom-out">zoom-out</div>
</div>

Css Code:

.container{
  padding: 2rem;
  text-align: center;
}
.boxs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.box{
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: .5rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #f5f5f7;
}
/* cursor effects */
.auto {
  cursor: auto;
}
.default {
  cursor: default;
}
.none {
  cursor: none;
}
.context-menu {
  cursor: context-menu;
}
.help {
  cursor: help;
}
.pointer {
  cursor: pointer;
}
.progress {
  cursor: progress;
}
.wait {
  cursor: wait;
}
.cell {
  cursor: cell;
}
.crosshair {
  cursor: crosshair;
}
.text {
  cursor: text;
}
.vertical-text {
  cursor: vertical-text;
}
.alias {
  cursor: alias;
}
.copy {
  cursor: copy;
}
.move {
  cursor: move;
}
.no-drop {
  cursor: no-drop;
}
.not-allowed {
  cursor: not-allowed;
}
.all-scroll {
  cursor: all-scroll;
}
.col-resize {
  cursor: col-resize;
}
.row-resize {
  cursor: row-resize;
}
.n-resize {
  cursor: n-resize;
}
.e-resize {
  cursor: e-resize;
}

.s-resize {
  cursor: s-resize;
}
.w-resize {
  cursor: w-resize;
}
.ns-resize {
  cursor: ns-resize;
}
.ew-resize {
  cursor: ew-resize;
}
.ne-resize {
  cursor: ne-resize;
}
.nw-resize {
  cursor: nw-resize;
}
.se-resize {
  cursor: se-resize;
}
.sw-resize {
  cursor: sw-resize;
}
.nesw-resize {
  cursor: nesw-resize;
}
.zoom-in {
  cursor: zoom-in;
}
.zoom-out {
  cursor: zoom-out;
}

From the above code snippet and from the results, you can see and test out different mouse cursors that CSS has by hovering your mouse cursor on each of those boxes containing the name of each CSS cursor property value.

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply