使用 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` 屬性設定 `