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

插入符号也称为文本光标，用作在屏幕上显示的指示器，指示文本输入将从哪里开始。这有助于用户查看他正在添加文本的位置。有许多用户界面将插入符号表示为细长的垂直线或方框，会闪烁，并且在不同的浏览器和界面上会有所不同。

在本文中，我们将看看如何使用CSS在网页中隐藏插入符号？

如何隐藏插入符号

插入符号是垂直闪烁的线条，您可能在输入字段中见过，它指示了文本应插入的位置。为了在网页的输入字段中隐藏插入符号，可以使用CSS中的caret-color属性。该属性通常有三个值，包括auto，color和transparent值。让我们看一下caret-color的语法。

caret-color: transparent;

让我们看一个示例来更好地理解这个属性。

示例

在这个示例中，我们将使用caret-color属性，并将其值设置为透明，以便在网页上隐藏插入符号。让我们看一下代码，这样我们就可以更好地理解了。

<!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属性

caret-color属性可以设置垂直闪烁线的颜色，也被称为插入符号，它经常出现在输入字段中。插入符号的颜色也可以更改，caret-color属性可以使用不同的值，其中大多数是auto、transparent和任何颜色。

不同的浏览器使用不同的插入符号，比如导航插入符号可以自由移动，但不能编辑。使用caret-color属性的示例可能如下：

caret-color:rgba(0,0,0,0);

垂直线或插入符的颜色可以设置为来自rbga调色板的任何颜色。

让我们看另一个示例，这样我们可以理解如何使用caret-color属性将插入符设为透明来使其消失。

示例

在这个示例中，我们将再次创建两个输入字段。在第一个输入字段中，我们将使用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>

在上面的代码中，你可以看到我们给输入字段分别赋予了两个类，以便于理解和区分。我们在样式部分使用了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">