如何使用CSS隐藏网页中的插入光标

粗体字也被称为文本光标，它作为一个指示器显示在屏幕上，并指示文本输入将从哪里开始。这可以帮助用户查看他正在添加文本的位置。有许多用户界面会用一条细的垂直线或一个会闪烁的方框来表示光标，它在不同的浏览器和界面上都有所不同。

在这篇文章中，我们将看看如何使用CSS来隐藏网页中的插入光标？

如何隐藏插入的光标

插入圆点是一条闪动的垂直线，你可能在输入框中看到过，它表示文本要插入的位置。为了在我们的网页中隐藏输入字段中的光标，CSS中使用了光标颜色属性。该属性通常有3个值，如自动、颜色和透明值。让我们来看看粗体字颜色的语法。

caret-color: transparent;

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

示例

在这个例子中，我们将使用caret-color属性并将其值设置为透明，以便在网页上隐藏caret。让我们看看代码，以便我们能更好地理解。

<!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属性并将其设置为透明。因此，当用户点击第一个字段时，他将能够看到光标，而在第二个输入字段，用户将无法看到光标。

粗体字的颜色属性

Caret-color属性将设置垂直闪烁线的颜色，也被称为插入光标，因为它经常出现在输入栏中。逗号的颜色也可以改变，逗号颜色属性有不同的值，其中大多数是自动、透明和任何颜色。

不同的浏览器使用不同的光标，如导航光标，它可以自由移动，但不是可编辑的格式。一个使用光标颜色属性的例子可以是

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

竖线或光标的颜色可以被设置为rbga调色板中的任何颜色。

让我们看看另一个例子，这样，我们就能理解如何使用caret-color属性将其值设置为透明，从而使caret消失。

示例

在这个例子中，我们将再次创建2个输入字段，在第一个字段中，我们将使用caret-color属性，并将其值设置为红色，这意味着现在caret的颜色将是红色的，当它闪烁时，我们将看到红色；在第二个输入字段中，我们将使用caret-color属性，并将其值设置为透明，这将在点击文本字段时隐藏caret。让我们看一下代码。

<!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属性，以便隐藏caret并设置caret的颜色。

你可以在上面的输出中看到，我们有 “红色光标 “和 “隐藏的输入光标”，当用户点击输入字段时，这两个光标将发挥作用。

我们可以看到光标的元素

我们可以在以下元素中看到光标—-。

<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">
<textarea>