Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Caret Color

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      caret-color

      CSS caret-color property specifies the color of the insertion caret, which is the visible marker indicating where the next typed character will be placed. It is also known as the text input cursor.
      The caret is found in elements such as <input> or those with contenteditable attribute. This is a thin vertical line, flashing to enhance visibility. It is black by default, but this property allows you to change it.

      Possible Values

      • auto − The user agent chooses a suitable colour for the caret. The color is commonly currentcolor, but the user agent may select for a different one for better visibility, considering currentcolor, background, shadows, and other factors.Note: Even user agents can use the normally animatable currentcolor for the auto value, it is not interpolated during transitions and animations.
      • <color> − Color of the caret.
      The insertion caret is just one type; browsers may have a navigation caret for non-editable text, while the cursor over text with the auto property or certain elements is not a caret but a cursor. The mouse cursor image appears as a caret when hovering over text with the auto property or over an element with text or vertical-text property, but it is actually a cursor, not a caret.

      Applies to

      All elements.

      Syntax

      Keyword Values

      caret-color: auto;
      caret-color: transparent;
      caret-color: currentcolor;

      <color> Values

      caret-color: red;
      caret-color: #5729e9;
      caret-color: rgb(0 200 0);
      caret-color: hsl(228deg 4% 24% / 80%);

      CSS caret-color - auto Value

      The following example demonstrates use of property caret-color: auto. We see input field styled with a default cursor color 
      <html>
      <head>
      <style>
         input {
            caret-color: auto;
            margin-bottom: 10px;
            padding: 5px;
         }
      </style>
      </head>
      <body>
         <input value="Deafult cursor color." size="65" />
      </body>
      </html>

      CSS caret-color - transparent Value

      The following example demonstrates the caret-color: transparent property. Here input field is styled with a transparent cursor 
      <html>
      <head>
      <style>
         input {
            caret-color: transparent;
            margin-bottom: 10px;
            padding: 5px;
         }
      </style>
      </head>
      <body>
         <input value="Transparent cursor." size="65" />
      </body>
      </html>

      CSS caret-color - currentcolor Value

      The following example demonstrates the caret-color: currentcolor. This sets the color of the cursor to the text color (blue) −
      <html>
      <head>
      <style>
         input {
            color: blue;
            border: 3px solid black;  
            padding: 5px;
            caret-color: currentColor;
         }
      </style>
      </head>
      <body>
         <input value="Deafult cursor color." size="65" />
      </body>
      </html>

      CSS caret-color - <color> Values

      The following example demonstartes how to use caret-color property for styling of input elements with different cursor colors 
      <html>
      <head>
      <style>
         input {
            display: block;
            margin-bottom: 10px;
            padding: 10px;
         }
         .box1 {
            caret-color: orange;
         }
         .box2 {
            caret-color: #5729e9;
         }
         .box3 {
            caret-color: rgb(241, 245, 20);
         }
         .box4 {
            caret-color: hsla(320, 77%, 58%, 0.8);   
         }
      </style>
      </head>
      <body>
         <input class="box1" value="The cursor is orange colored." size="65" />
         <input class="box2" value="The cursor is blue colored." size="65" />
         <input class="box3" value="The cursor is yellow colored." size="65" />
         <input class="box4" value="The cursor is pink colored." size="65" />
      </body>
      </html>