Heim > Artikel > Web-Frontend > Was ist der Caret-Stil für die Texteingabe?

Was ist der Caret-Stil für die Texteingabe?

WBOYnach vorne: 2023-09-11 19:21:03777Durchsuche

Bei der Texteingabe von HTML können Sie eine Markierung im Text sehen, die als Texteingabe-Caret bezeichnet wird. Er wird auch als Texteingabecursor bezeichnet.

In diesem Tutorial lernen wir, den Texteingabe-Caret zu formatieren. Allerdings können wir nur die Farbe des Texteingabe-Carets ändern, da moderne Browser das Ändern der Form nicht unterstützen.

Grammatik

Benutzer können die CSS-Eigenschaft „caret-color“ gemäß der folgenden Syntax verwenden, um die Farbe des Texteingabe-Caret zu ändern.

caret-color: color;

In der obigen Eingabe kann „Farbe“ ein Farbname im String-Format, ein Hexadezimalwert, ein RGB-Wert oder ein HSL-Wert sein.

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Im folgenden Beispiel haben wir zwei Texteingaben definiert und ihnen die Klassennamen „inp“ und „inp1“ gegeben. Mit der CSS-Eigenschaft „caret-color“ legen wir die Farbe „rot“ für das erste Eingabeelement fest.

Außerdem verwenden wir den Wert „auto“ im zweiten Eingabeelement. In der Ausgabe kann der Benutzer einen roten Cursor im ersten Eingabefeld und einen schwarzen Cursor im zweiten Eingabefeld beobachten, da der Auto-Wert die Standardfarbe des Browsers annimmt, die in den meisten Fällen Schwarz ist.

<html>
<head>
   <style>
      .inp {
         caret-color: red;
      }
      .inp1 {
         caret-color: auto;
      }
   </style>
</head>
<body>
   <h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
   <input type = "text" placeholder = "Write something here." class = "inp">
   <br> <br>
   <input type = "text" placeholder = "Write something here." class = "inp1">
</body>
</html>

Beispiel 2

Im folgenden Beispiel haben wir „transparent“ als Wert der CSS-Eigenschaft „color-caret“ verwendet, um die transparente Farbe des Cursors festzulegen. Grundsätzlich können wir es verwenden, wenn wir den Texteingabecursor ausblenden müssen.

In der Ausgabe kann der Benutzer beobachten, dass er Text in das Eingabefeld eingeben kann, aber den Cursor nicht sehen kann.

<html>
<head>
   <style>
      .inp {
         caret-color: transparent;
      }
   </style>
</head>
<body>
   <h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
   <input type = "text" placeholder = "Your Good name" class = "inp">
</body>
</html>

Beispiel 3

Im folgenden Beispiel haben wir Text in ein div-Element eingefügt. Danach haben wir das Attribut „contenteditable“ mit dem Wert „true“ für das div-Element verwendet, wodurch der Inhalt des div-Elements bearbeitbar wird.

Hier formatieren wir den Texteingabecursor des bearbeitbaren div-Elements und geben ihm eine rosa Farbe, die der Benutzer in der Ausgabe sehen kann.

<html>
<head>
   <style>
      .test {
         caret-color: pink;
      }
   </style>
</head>
<body>
   <h3>Using the <i> caret-color </i> CSS property to style the text input caret</h3>
   <div class = "test" contenteditable = "true">
      This div is editable. Click anywhere on the text to start editing. Observe the Pink color of the cursor.
   </div>
</body>
</html>

Benutzer haben gelernt, die CSS-Eigenschaft „caret-color“ zu verwenden, um den Texteingabe-Caret zu formatieren. Allerdings unterstützen einige alte Browser auch das Attribut „caret-shape“, mit dem wir die Form des Cursors ändern können, moderne Browser unterstützen es jedoch nicht.

Das obige ist der detaillierte Inhalt vonWas ist der Caret-Stil für die Texteingabe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html auto 字符串

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Lernen Sie CSS3-Flexbox-Kenntnisse und wie können Sie Webseitenelemente schnell anordnen?Nächster Artikel：Lernen Sie CSS3-Flexbox-Kenntnisse und wie können Sie Webseitenelemente schnell anordnen?

In Verbindung stehende Artikel

Mehr sehen