如何使用 CSS 隱藏網頁中的插入符號？-css教學-PHP中文網

如何隱藏插入符號？

範例

caret-color屬性

我們可以看到插入符號的元素

結論

首頁

web前端

css教學

如何使用 CSS 隱藏網頁中的插入符號？

王林

Sep 05, 2023 am 08:13 AM

如何使用 CSS 隐藏网页中的插入符号？

插入符號也稱為文字遊標，它充當螢幕上顯示的指示器並指示文字輸入的起始位置。這有助於用戶查看他在哪裡添加文字。有許多使用者介面都會代表插入符號，例如一條細垂直線或一個會閃爍的框，並且它會因瀏覽器和介面的不同而有所不同。

在本文中，我們將看看如何使用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">

登入後複製