如何使用 CSS 隱藏網頁中的插入符號？
- 王林轉載
- 2023-09-05 08:13:02791瀏覽
插入符號也稱為文字遊標，它充當螢幕上顯示的指示器並指示文字輸入的起始位置。這有助於用戶查看他在哪裡添加文字。有許多使用者介面都會代表插入符號，例如一條細垂直線或一個會閃爍的框，並且它會因瀏覽器和介面的不同而有所不同。
在本文中，我們將看看如何使用CSS在網頁中隱藏插入符號？
如何隱藏插入符號？
插入插入符號是您可能在輸入欄位中看到的閃爍垂直線，它指示必須插入文字的位置。為了在網頁的輸入欄位中隱藏插入符號，CSS 中使用了插入符號顏色屬性。通常有 3 個值與屬性一起使用，如自動、顏色和透明值。讓我們看看插入符號顏色的語法。
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>
執行上述程式碼時，您可以看到我們建立了 2 個輸入欄位。然後，在第二個欄位中使用插入符號顏色屬性並將其設為透明。因此，當使用者點擊第一個欄位時，他將能夠看到插入符號，而在第二個輸入欄位中，使用者將無法看到插入符號。
caret-color屬性
插入符號顏色屬性將設定垂直閃爍線的顏色，也稱為插入插入符號，因為它經常出現在輸入欄位中。插入符號的顏色也可以更改，並且插入符號顏色屬性可以使用不同的值，其中大多數是自動、透明和任何顏色。
不同的瀏覽器使用不同的插入符號，例如導航插入符號可以自由移動，但不能編輯。使用插入符號顏色屬性的一個例子可以是
caret-color:rgba(0,0,0,0);
垂直線或插入符號的顏色可以設定為 rbga 調色盤中的任何顏色。
讓我們來看另一個例子，這樣我們就可以理解如何使用caret-color屬性將插入符號設為透明，從而使其消失。
範例
在這個例子中，我們將再次建立2個輸入字段，第一個輸入字段我們將使用caret-color屬性，並將其值設為紅色，這意味著現在插入符的顏色將是紅色，當它閃爍時，我們將看到紅色，而在第二個輸入欄位中，我們將使用caret-color屬性，並將其值設為透明，這將隱藏插入符，即使點擊文字欄位。讓我們看看程式碼。
<!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>
在上面的程式碼中，您可以看到我們給了兩個輸入欄位2個類，以便於理解和區分。我們在樣式部分使用了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">
結論
不同的瀏覽器和使用者介面以不同的方式表示插入符，但大多數都有一個垂直的細線閃爍，也被稱為插入文本，它指示使用者在何處開始輸入文字。插入符最常見於輸入元素和文字區域元素。我們可以使用插入符顏色屬性來編輯插入符，可用的值有顏色、自動和透明。
在本文中，我們了解如何使用插入符號顏色屬性來隱藏網頁中的插入插入符號。
以上是如何使用 CSS 隱藏網頁中的插入符號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！