Yumma CSS 3.5 is live! 🎉

Caret Color

Controls the text input cursor color.

ClassStyle
cc-red-1caret-color: #f9e0e0
cc-red-2caret-color: #f3c5c5
cc-red-3caret-color: #edaaaa
cc-red-4caret-color: #e88e8e
cc-red-5caret-color: #e27373
cc-red-6caret-color: #dd5858
cc-redcaret-color: #d73d3d
cc-red-7caret-color: #b93434
cc-red-8caret-color: #9b2c2c
cc-red-9caret-color: #7d2323
cc-red-10caret-color: #5f1b1b
cc-red-11caret-color: #411212
cc-red-12caret-color: #220a0a
cc-orange-1caret-color: #fae7d9
cc-orange-2caret-color: #f6d2b9
cc-orange-3caret-color: #f1bd98
cc-orange-4caret-color: #eda777
cc-orange-5caret-color: #e99256
cc-orange-6caret-color: #e47d35
cc-orangecaret-color: #e06814
cc-orange-7caret-color: #c15911
cc-orange-8caret-color: #a14b0e
cc-orange-9caret-color: #823c0c
cc-orange-10caret-color: #632e09
cc-orange-11caret-color: #431f06
cc-orange-12caret-color: #241103
cc-yellow-1caret-color: #f8f0d7
cc-yellow-2caret-color: #f2e3b5
cc-yellow-3caret-color: #ecd692
cc-yellow-4caret-color: #e5c86f
cc-yellow-5caret-color: #dfbb4c
cc-yellow-6caret-color: #d9ae2a
cc-yellowcaret-color: #d3a107
cc-yellow-7caret-color: #b58a06
cc-yellow-8caret-color: #987405
cc-yellow-9caret-color: #7a5d04
cc-yellow-10caret-color: #5d4703
cc-yellow-11caret-color: #3f3002
cc-yellow-12caret-color: #221a01
cc-green-1caret-color: #dbf3e4
cc-green-2caret-color: #bce8cc
cc-green-3caret-color: #9cddb4
cc-green-4caret-color: #7dd29c
cc-green-5caret-color: #5ec785
cc-green-6caret-color: #3ebc6d
cc-greencaret-color: #1fb155
cc-green-7caret-color: #1b9849
cc-green-8caret-color: #167f3d
cc-green-9caret-color: #126731
cc-green-10caret-color: #0e4e25
cc-green-11caret-color: #09351a
cc-green-12caret-color: #051c0e
cc-teal-1caret-color: #d9f1ee
cc-teal-2caret-color: #b8e4df
cc-teal-3caret-color: #97d8d0
cc-teal-4caret-color: #76cbc2
cc-teal-5caret-color: #54bfb3
cc-teal-6caret-color: #33b2a4
cc-tealcaret-color: #12a695
cc-teal-7caret-color: #0f8f80
cc-teal-8caret-color: #0d786b
cc-teal-9caret-color: #0a6056
cc-teal-10caret-color: #084942
cc-teal-11caret-color: #05322d
cc-teal-12caret-color: #031b18
cc-cyan-1caret-color: #d7f0f5
cc-cyan-2caret-color: #b4e4ec
cc-cyan-3caret-color: #91d7e3
cc-cyan-4caret-color: #6ecada
cc-cyan-5caret-color: #4bbdd1
cc-cyan-6caret-color: #28b1c8
cc-cyancaret-color: #05a4bf
cc-cyan-7caret-color: #048da4
cc-cyan-8caret-color: #04768a
cc-cyan-9caret-color: #035f6f
cc-cyan-10caret-color: #024854
cc-cyan-11caret-color: #023139
cc-cyan-12caret-color: #011a1f
cc-blue-1caret-color: #dfe9fa
cc-blue-2caret-color: #c2d6f5
cc-blue-3caret-color: #a6c2f0
cc-blue-4caret-color: #8aafeb
cc-blue-5caret-color: #6e9ce7
cc-blue-6caret-color: #5188e2
cc-bluecaret-color: #3575dd
cc-blue-7caret-color: #2e65be
cc-blue-8caret-color: #26549f
cc-blue-9caret-color: #1f4480
cc-blue-10caret-color: #173361
cc-blue-11caret-color: #102342
cc-blue-12caret-color: #081323
cc-indigo-1caret-color: #e4e5f9
cc-indigo-2caret-color: #cdcef4
cc-indigo-3caret-color: #b6b7ee
cc-indigo-4caret-color: #9fa0e9
cc-indigo-5caret-color: #878ae4
cc-indigo-6caret-color: #7073de
cc-indigocaret-color: #595cd9
cc-indigo-7caret-color: #4d4fbb
cc-indigo-8caret-color: #40429c
cc-indigo-9caret-color: #34357e
cc-indigo-10caret-color: #27285f
cc-indigo-11caret-color: #1b1c41
cc-indigo-12caret-color: #0e0f23
cc-violet-1caret-color: #eae3fa
cc-violet-2caret-color: #d8cbf5
cc-violet-3caret-color: #c6b3f0
cc-violet-4caret-color: #b49beb
cc-violet-5caret-color: #a183e7
cc-violet-6caret-color: #8f6be2
cc-violetcaret-color: #7d53dd
cc-violet-7caret-color: #6c47be
cc-violet-8caret-color: #5a3c9f
cc-violet-9caret-color: #493080
cc-violet-10caret-color: #372561
cc-violet-11caret-color: #261942
cc-violet-12caret-color: #140d23
cc-pink-1caret-color: #f8e1ec
cc-pink-2caret-color: #f2c6dc
cc-pink-3caret-color: #ecabcc
cc-pink-4caret-color: #e691bb
cc-pink-5caret-color: #e076ab
cc-pink-6caret-color: #da5c9a
cc-pinkcaret-color: #d4418a
cc-pink-7caret-color: #b63877
cc-pink-8caret-color: #992f63
cc-pink-9caret-color: #7b2650
cc-pink-10caret-color: #5d1d3d
cc-pink-11caret-color: #401429
cc-pink-12caret-color: #220a16
cc-slate-1caret-color: #e0e0e3
cc-slate-2caret-color: #c5c5ca
cc-slate-3caret-color: #ababb1
cc-slate-4caret-color: #909098
cc-slate-5caret-color: #757580
cc-slate-6caret-color: #5a5a67
cc-slatecaret-color: #3f3f4e
cc-slate-7caret-color: #363643
cc-slate-8caret-color: #2d2d38
cc-slate-9caret-color: #25252d
cc-slate-10caret-color: #1c1c22
cc-slate-11caret-color: #131317
cc-slate-12caret-color: #0a0a0c
cc-gray-1caret-color: #e6e7e9
cc-gray-2caret-color: #cfd1d5
cc-gray-3caret-color: #b9bcc1
cc-gray-4caret-color: #a3a7ae
cc-gray-5caret-color: #8d929a
cc-gray-6caret-color: #767c87
cc-graycaret-color: #606773
cc-gray-7caret-color: #535963
cc-gray-8caret-color: #454a53
cc-gray-9caret-color: #383c43
cc-gray-10caret-color: #2a2d33
cc-gray-11caret-color: #1d1f23
cc-gray-12caret-color: #0f1012
cc-silver-1caret-color: #f5f5f6
cc-silver-2caret-color: #ecedee
cc-silver-3caret-color: #e3e4e6
cc-silver-4caret-color: #dadcdf
cc-silver-5caret-color: #d1d3d7
cc-silver-6caret-color: #c8cbcf
cc-silvercaret-color: #bfc2c7
cc-silver-7caret-color: #a4a7ab
cc-silver-8caret-color: #8a8c8f
cc-silver-9caret-color: #6f7173
cc-silver-10caret-color: #545558
cc-silver-11caret-color: #393a3c
cc-silver-12caret-color: #1f1f20
cc-blackcaret-color: #000000
cc-currentcaret-color: currentColor
cc-transparentcaret-color: transparent
cc-whitecaret-color: #ffffff

The custom caret-color will have an indigo color from the default color palette.

Try writing a sentence to see the caret color.
<div class="d-g g-16 gtc-1 sm:gtc-2">
  <div class="d-g">
    <label class="fw-600">Default</label>
    <input class="b-1 bc-silver p-1 rad-1" placeholder="Type something..." />
  </div>


  <div class="d-g">
    <label class="fw-600">Custom</label>
    <input class="b-1 bc-silver cc-indigo p-1 rad-1 " placeholder="Type something..." />
  </div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:cc-*, md:cc-*, lg:cc-*, and xxl:cc-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:cc-* utility to override elements and change their values when hovering over them.