在HTML的文本輸入中，您可以觀察到在文本中顯示的標(biāo)記，稱為文本輸入插入符。它也被稱為文本輸入光標(biāo)。
在本教程中，我們將學(xué)習(xí)設(shè)置文本輸入插入符的樣式。但是，我們只能更改文本輸入插入符號的顏色，因為現(xiàn)代瀏覽器不支持更改形狀。
語法
用戶可以按照下面的語法使用 ‘caret-color’ CSS 屬性來改變文本輸入插入符的顏色。
caret-color: color;
登錄后復(fù)制
在上面的輸入中，‘color’可以是字符串格式的顏色名稱、十六進制值、rgb值或HSL值。
Example 1
的中文翻譯為：
示例 1
在下面的示例中，我們定義了兩個文本輸入并給出了“inp”和“inp1”類名稱。我們使用“caret-color”CSS 屬性為第一個輸入元素設(shè)置了“紅色”顏色。
此外，我們在第二個輸入元素中使用了‘a(chǎn)uto’值。在輸出中，用戶可以觀察到第一個輸入框中的紅色光標(biāo)和第二個輸入框中的黑色光標(biāo)，因為auto值會采用瀏覽器的默認(rèn)顏色，大多數(shù)情況下為黑色。
<html>
<head>
<style>
.inp {
caret-color: red;
}
.inp1 {
caret-color: auto;
}
</style>
</head>
<body>
<h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<input type = "text" placeholder = "Write something here." class = "inp">
<br> <br>
<input type = "text" placeholder = "Write something here." class = "inp1">
</body>
</html>
登錄后復(fù)制
示例 2
在下面的示例中，我們使用了“transparent”作為“color-caret” CSS屬性的值，以設(shè)置光標(biāo)的透明顏色。基本上，當(dāng)我們需要隱藏文本輸入光標(biāo)時，可以使用它。
在輸出中，用戶可以觀察到他們可以在輸入框中輸入文本，但無法看到光標(biāo)。
<html>
<head>
<style>
.inp {
caret-color: transparent;
}
</style>
</head>
<body>
<h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<input type = "text" placeholder = "Your Good name" class = "inp">
</body>
</html>
登錄后復(fù)制
示例 3
在下面的示例中，我們在 div 元素內(nèi)添加了文本。之后，我們?yōu)?div 元素使用了具有 true 值的 ‘contenteditable’ 屬性，這使得 div 元素的內(nèi)容可編輯。
在這里，我們設(shè)置了可編輯 div 元素的文本輸入光標(biāo)的樣式，并為其賦予了粉紅色，用戶可以在輸出中觀察到。
<html>
<head>
<style>
.test {
caret-color: pink;
}
</style>
</head>
<body>
<h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<div class = "test" contenteditable = "true">
This div is editable. Click anywhere on the text to start editing. Observe the Pink color of the cursor.
</div>
</body>
</html>
登錄后復(fù)制
用戶學(xué)會了使用“caret-color”CSS 屬性來設(shè)置文本輸入插入符號的樣式。然而，一些舊的瀏覽器也支持‘caret-shape’屬性，使用它，我們可以改變光標(biāo)的形狀，但現(xiàn)代瀏覽器不支持它。
以上就是什么是文本輸入插入符樣式？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
