資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 隱藏網頁中的插入游標？
游標也被稱為文字游標，它充當螢幕上顯示的指示器，指示文字輸入將從哪裡開始。這有助於使用者檢視他新增文字的位置。許多使用者介面將以細垂直線或方框的形式表示游標，這些方框會閃爍，並且在不同的瀏覽器和介面之間有所不同。
在本文中，我們將瞭解如何使用 CSS 隱藏網頁中的插入游標？
如何隱藏插入游標？
插入游標是您可能在輸入欄位中看到的閃爍垂直線，它指示文字需要插入的位置。要隱藏網頁中輸入欄位的游標，CSS 中使用 `caret-color` 屬性。通常，此屬性使用三個值：`auto`、顏色和 `transparent` 值。讓我們看一下 `caret-color` 的語法。
caret-color: transparent;
讓我們看一個例子來更好地理解這個屬性。
示例
在示例中，我們將使用 `caret-color` 屬性並將其值設定為 `transparent`，以便隱藏網頁上的游標。讓我們看一下程式碼，以便我們更好地理解這一點。
<!DOCTYPE html>
<html lang="en">
<head>
<title>An Example of hiding the caret</title>
<style>
.hide {
caret-color: transparent;
}
body {
text-align: center;
}
</style>
</head>
<body>
<p>Once you click in the textbox below the cursor is visible.</p>
<input type="text"><br><br>
<p>In this next text box we made the cursor <b>transparent</b>.</p>
<input type="text" class="hide">
</body>
</html>
執行上述程式碼後，您可以看到我們建立了兩個輸入欄位。然後，在第二個欄位中使用了 `caret-color` 屬性並將其設定為 `transparent`。因此，當用戶單擊第一個欄位時，他將能夠看到游標，而在第二個輸入欄位中，使用者將無法看到游標。
`caret-color` 屬性
`caret-color` 屬性將設定垂直閃爍線的顏色，也稱為插入游標，因為它通常出現在輸入欄位中。游標的顏色也可以更改，並且 `caret-color` 屬性使用不同的值，其中大部分是 `auto`、`transparent` 和任何顏色。
不同的瀏覽器使用不同的游標，例如導航游標，可以自由移動，但格式不可編輯。使用 `caret-color` 屬性的一個示例可能是
caret-color:rgba(0,0,0,0);
垂直線或游標的顏色可以設定為 rgba 調色盤中的任何顏色。
讓我們再看一個示例，以便我們瞭解如何透過將 `caret-color` 屬性的值設定為 `transparent` 來使游標消失。
示例
在示例中，我們將再次建立兩個輸入欄位，在第一個欄位中，我們將使用 `caret-color` 屬性並將其值設定為紅色，這意味著現在游標的顏色將為紅色，並且當它閃爍時，我們將看到紅色，在第二個輸入欄位中，我們將使用 `caret-color` 屬性並將其值設定為 `transparent`，這將隱藏游標，即使在單擊文字欄位時也是如此。讓我們看一下程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the hiding the insertion caret</title>
<style>
.cursor {
caret-color: transparent;
}
body {
text-align: center;
}
.clr{
caret-color: red;
}
</style>
</head>
<body>
<p>Following textbox have colored insertion caret.</p>
<input type="text" class="clr"><br><br>
<p>Here we are trying to hide the insersion caret.</p>
<input type="text" class="cursor">
</body>
</html>
在上面的程式碼中，您可以看到我們為兩個輸入欄位都提供了兩個類，以便於理解和區分，我們在樣式部分使用了 `caret-color` 屬性來隱藏游標並設定游標的顏色。
您可以在上面的輸出中看到我們有“紅色游標”和“隱藏的輸入游標”，當用戶單擊輸入欄位時，它將起作用。
可以看到游標的元素
我們可以在以下元素中看到游標：
<input type="text"> <input type="password"> <input type="search"> <input type="date"> <input type="time"> <input type="datetime-local"> <input type="number"> <input type="range"> <input type="email"> <input type="tel"> <input type="url">
結論
不同的瀏覽器和使用者介面以不同的方式表示游標，但大多數都有一個閃爍的細垂直線，它也被稱為插入文字，因為它指示使用者從哪裡開始輸入文字。游標最常出現在輸入元素和文字區域元素中。我們可以使用 `caret-color` 屬性來編輯游標，可以使用其值包括顏色、`auto` 和 `transparent`。
在本文中，我們學習瞭如何使用 `caret-color` 屬性從網頁中隱藏插入游標。
2K+ 閱讀量
