caret-color

試一試

caret-color: red;

caret-color: auto;

caret-color: transparent;

<section class="default-example container" id="default-example">
  <div>
    <p>Enter text in the field to see the caret:</p>
    <p><input id="example-element" type="text" /></p>
  </div>
</section>

#example-element {
  font-size: 1.2rem;
}

語法

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

/* Global values */
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: revert-layer;
caret-color: unset;

值

auto

通常解析為 currentColor，即將被修改的文字的 color。

<color>

插入符號的顏色。

描述

插入符號是可編輯文字中——或接受文字輸入的元素中——內容的插入點（或刪除點）的可見指示器。插入符號通常是一條細長的垂直線，指示字元新增或刪除發生的位置。它通常會閃爍（時亮時滅），以便更引人注目。插入符號只在可編輯元素獲得焦點時出現。預設情況下，此插入符號的顏色與文字顏色相同。caret-color 屬性可用於將此插入符號的顏色設定為 currentColor 以外的顏色，或將已著色的插入符號重置回其預設顏色。

auto 值將插入符號設定為 currentColor，即正在新增或刪除的文字的 color。使用者代理可能會選擇不同的顏色，以確保與周圍內容有良好的可見性和對比度，同時考慮 color、background-color、陰影和其他因素。然而，實際上，所有瀏覽器預設都使用當前顏色，並且當 caret-color 設定為 auto 時也如此。您可以將任何有效的 <color> 設定為值。

理解插入符號

插入符號，以及因此該屬性，僅適用於可接受文字輸入的文字或元素。插入符號出現在使用者可更新內容的焦點使用者介面元素中，例如接受自由格式文字的 <input> 元素、<textarea> 元素以及設定了 contenteditable 屬性的元素。

插入符號可能出現在型別為 password、text、search、tel 和 email 的 <input> 元素中。對於日期、color、hidden、radio 或 checkbox 輸入型別，不存在插入符號。某些瀏覽器會在 number 輸入型別中顯示插入符號。在某些瀏覽器中，可以使插入符號出現在從不包含文字內容的元素中——例如，透過設定 appearance: none 並新增 contenteditable 屬性。然而，不建議這樣做。

插入符號可以顯示在可編輯元素或其後代中，前提是可編輯性未被停用，例如透過將後代元素的 contentEditable 屬性設定為 false。如果元素不可編輯或不可選擇，例如如果 user-select 設定為 none，則不應出現插入符號。

插入符號與游標

插入符號有多種型別。插入符號是唯一受 caret-color 屬性影響的型別。

許多瀏覽器都有導航插入符號，其作用類似於插入符號，但可以在不可編輯文字中移動。

某些 cursor 屬性值（例如 auto 或 text）所顯示的滑鼠游標影像可能類似於插入符號，但它不是。它是游標。

從 auto 動畫

通常，當 caret-color 設定為或預設為 auto 時，使用者代理會使用可動畫的 currentColor。然而，auto 預設不是一個可動畫的值：當 caret-color 從 auto 動畫或過渡到任何顏色值時，不會發生插值。動畫是離散的；顏色在 animation-duration 或 transition-duration 的中點從 currentColor 顏色切換或切換到 currentColor 顏色。

正式定義

正式語法

caret-color = 
  auto     |
  <color>  

示例

設定自定義插入符號顏色

HTML

<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">
  This paragraph can be edited, and its caret has a custom color as well!
</p>

CSS

input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: orange;
}

p.custom {
  caret-color: green;
}

結果

規範

瀏覽器相容性

另見

• caret-animation、caret-shape
• caret 簡寫
• color
• text-emphasis
• cursor
• text-emphasis
• CSS <color> 資料型別
• <input> 元素
• HTML contenteditable 屬性