CSS - 光标颜色属性

CSS caret-color 属性指定光标的颜色，光标是可见的标记，也称为文本输入光标。它用于使用光标且可编辑的输入元素，例如输入表单、文本框、textarea 等。

语法

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

属性值

值	描述
auto	浏览器使用 currentColor 来表示光标。默认值。
color	可以使用不同的格式（颜色名称、十六进制、rgb 等）指定光标的颜色。
transparent	光标不可见。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 光标颜色属性示例

以下示例说明了使用不同值的 caret-color 属性。

使用 auto 值的光标颜色属性

要让浏览器决定使用当前文本颜色来决定光标的颜色，我们使用 auto 值。当前文本颜色将应用于光标。这在以下示例中显示。

示例

<!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)
      </label>
      <input type="text" value="Default cursor color."
      class=" inp text" 
      />
      <textarea rows="10" 
      class=" inp textarea">Default caret color.
      </textarea>
   </div>

</body>

</html>

使用颜色值的光标颜色属性

要为光标指定我们选择的颜色，我们可以使用不同的格式（颜色名称、十六进制值、rgb 值、hsl 值等）指定颜色。指定的颜色将应用于光标。这在以下示例中显示。

示例

<!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.)
      </label>
      <input type="text" value="Green caret color."
      class=" inp text1" 
      />
      <input type="text" value="Pink cursor color."
      class=" inp text2" 
      />
      <input type="text" value="Blue cursor color."
      class=" inp text3" 
      />
      <textarea rows="10" 
      class=" inp textarea">green cursor color.
      </textarea>
    </div>

</body>

</html>

使用 transparent 值的光标颜色属性

要使光标透明，使其不可见，我们使用 transparent 值。这在以下示例中显示。

示例

<!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)
      </label>
      <input type="text" value="transparent caret."
      class="inp" 
      />
      <textarea rows="10" 
      class=" inp">transparent caret. 
      </textarea>
   </div>

</body>

</html>

支持的浏览器

属性
caret-color	57.0	79.0	53.0	11.1	44.0

css_properties_reference.htm

打印页面