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

列印頁面