caret color Property

Written by

in

Advanced Features

CSS caret-color property specifies the color of the cursor, which is the visible marker, also known as the text input cursor. It is used with input elements such as input forms, text boxes, textarea etc. which use the cursor and are editable.

Syntax

caret-color: auto | color | transparent | initial | inherit;

Property Values

Value	Description
auto	The browser uses the currentColor for the caret. Default.
color	The color of the caret can be specified in different formats (color names, hex, rgb etc.).
transparent	The caret is not visible.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Caret Color Property

The following examples explain the caret-color property with different values.

Caret Color Property with Auto Value

To let the browser decide the color of the cursor, which uses the current text color, we use the auto value. The current text color will be applied to the cursor. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  div {
     display: grid;
     gap: 20px;
     width: 60%;
  }
  .inp {
     border: 2px solid black;
     font-size: 16px;
     padding: 5px;
     caret-color: auto;
  }
  .text {
     color: blue;
  }
  .textarea {
     color: red;
  }   </style></head><body><h2>
  CSS caret-color property   </h2><div><label>
     caret-color: auto (color of the text will
     be applied to caret)
  &lt;/label&gt;&lt;input type="text" value="Default cursor color."
  class=" inp text" 
  /&gt;&lt;textarea rows="10" 
  class=" inp textarea"&gt;Default caret color.
  &lt;/textarea&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Caret Color Property with Color Values



To give a color of our choice to the cursor, we can specify the color in different format (color names, hex values, rgb values, hsl values etc.). The specified color will be applied to the cursor. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  div {
     display: grid;
     gap: 20px;
     width: 60%;
  }
  .inp {
     border: 2px solid black;
     font-size: 20px;
     padding: 5px;
  }
  .text1 {
     caret-color: orange;
  }
  .text2 {
     caret-color: #ff4d94;
  }
  .text3 {
     caret-color: rgb(0, 204, 204);
  }
  .textarea {
     caret-color: hsl(120, 100%, 50%);
  }   </style></head><body><h2>
  CSS caret-color property   </h2><div><label>
     caret-color: color values (specified color will
     be applied to caret.)
  &lt;/label&gt;&lt;input type="text" value="Green caret color."
  class=" inp text1" 
  /&gt;&lt;input type="text" value="Pink cursor color."
  class=" inp text2" 
  /&gt;&lt;input type="text" value="Blue cursor color."
  class=" inp text3" 
  /&gt;&lt;textarea rows="10" 
  class=" inp textarea"&gt;green cursor color.
  &lt;/textarea&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Caret Color Property with Transparent Value



To make the cursor transparent such that it is not visible, we use the transparent value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  div {
     display: grid;
     gap: 20px;
     width: 60%;
  }
  .inp {
     border: 2px solid black;
     font-size: 16px;
     padding: 5px;
     caret-color: transparent;
  }   </style></head><body><h2>
  CSS caret-color property   </h2><div><label>
     caret-color: transparent (cursor color 
     will not be visible)
  &lt;/label&gt;&lt;input type="text" value="transparent caret."
  class="inp" 
  /&gt;&lt;textarea rows="10" 
  class=" inp"&gt;transparent caret. 
  &lt;/textarea&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply Cancel reply

More posts