使用 CSS caret-color 更改光标颜色

光标可以在 CSS 中轻松更改。为此，请使用caret-color属性。这将允许您更改 textarea、input 等中的颜色。以下示例说明了 CSS caret-color 属性如何在网页上更改光标颜色。

更改输入元素的光标颜色

输入字段是用户输入数据的字段。要更改光标颜色，请使用 `caret-color` 属性设置 `` 元素。

input {
   font-size: 3em;
   caret-color: chartreuse;
   margin: 2%;
}

这是我们网页上的表单和 `` 元素：

<form>
   <input value="Check the caret color!" />
   <button>Hit!</button>
</form>

示例

以下是更改``光标颜色的代码。将光标放在表单中，您将看到光标颜色的变化：

<!DOCTYPE html>
<html>
<head>
   <style>
      form {
         padding: 2%;
         margin: 2%;
         text-align: center;
      }
      form:focus-within {
         box-shadow: 0 0 10px rgba(0,0,0,0.6);
         background-color: beige;
      }
      input {
         font-size: 3em;
         caret-color: chartreuse;
         margin: 2%;
      }
   </style>
</head>
<body>
   <form>
      <input value="Check the caret color!" />
      <button>Hit!</button>
   </form>
</body>
</html>

更改文本区域元素的光标颜色

Textarea 允许用户在表单中设置多行文本，例如段落。要更改光标颜色，请使用 `caret-color` 属性设置 `