Heim > Artikel > Web-Frontend > Wie wähle ich ein Texteingabefeld mithilfe der CSS-Auswahl aus?

Wie wähle ich ein Texteingabefeld mithilfe der CSS-Auswahl aus?

王林nach vorne: 2023-08-26 15:41:16798Durchsuche

Die Auswahl von Texteingabefeldern mithilfe von CSS-Selektoren ist ein leistungsstarkes und wichtiges Werkzeug für die Gestaltung und Ausrichtung auf bestimmte Elemente auf der Webseite. Als Webentwickler sind Texteingabefelder ein wesentlicher Bestandteil jedes Webformulars Als Designer müssen wir möglicherweise Texteingabefelder mithilfe von CSS-Selektoren auswählen, um den Stil auf sie anzuwenden. Wenn wir die Schriftfarbe oder Hintergrundfarbe ändern oder benutzerdefinierte Stile zu den Eingabefeldern hinzufügen möchten, ist es wichtig zu verstehen, wie diese ausgewählt werden Verwendung von CSS-Selektoren.

Struktur des Texteingabefelds

Bevor Sie CSS-Selektoren zur Auswahl eines Texteingabefelds verwenden, ist es wichtig, dessen Struktur zu verstehen. Ein Texteingabefeld wird normalerweise durch ein HTML-Element dargestellt, dessen Typattribut auf „text“ gesetzt ist. Der folgende HTML-Code erstellt beispielsweise ein Texteingabefeld.

<input type="text" name="user-name" id="user-id" value="initial-value" placeholder="Enter username >

Im obigen Code -

type="text" gibt an, dass es sich um ein Texteingabefeld handelt.
name="Benutzername" legt die Attribute des Eingabefelds fest, um die Eingabe beim Absenden des Formulars zu identifizieren.
id="user-id" legt das ID-Attribut des Eingabefelds fest, das zur Identifizierung des Eingabefelds für Styling- und Skriptzwecke verwendet wird.
value="initial-value"Legen Sie den Anfangswert des Eingabefelds fest. Dies ist optional und kann weggelassen werden.
placeholder="Benutzernamen eingeben" Legen Sie einen Platzhaltertext fest, der im Eingabefeld angezeigt wird, um dem Benutzer eine Eingabeaufforderung zu geben.

Wählen Sie alle Texteingabefelder mit der Elementauswahl aus

Eine einfache Möglichkeit, alle Texteingabefelder auf einer Webseite auszuwählen, ist die Verwendung eines Elementselektors. Texteingabefelder sind HTML-Elemente, die es Benutzern ermöglichen, Text einzugeben, beispielsweise ihren Namen, ihre E-Mail-Adresse oder ihr Passwort. Diese Elemente werden normalerweise mithilfe des „input“-Tags erstellt, wobei das „type“-Attribut auf „text“, „email“, „password“ oder „search“ gesetzt ist. Um alle Texteingabefelder auszuwählen, können wir den folgenden CSS-Selektor verwenden −

input[type="text"], input[type="email"], input[type="password"] {
   /* write your CSS Code */
}

Dieser Selektor zielt auf alle Eingabefelder ab, deren „Typ“-Attribut auf „Text“, „E-Mail“ oder „Passwort“ gesetzt ist. Ein Komma zwischen Selektoren bedeutet, dass alle Selektoren denselben Stil erhalten.

Beispiel 1: Texteingabefeld mithilfe des Typattributs auswählen

In diesem Beispiel verwenden wir den Typattributselektor, um alle Texteingabefelder im Formular auszuwählen. CSS-Stile werden auf alle Texteingabefelder mit den Attributen type="text", type="email" und type="password" angewendet. Auf diese Eingabefelder werden Rahmen-, Abstands-, Schriftgröße- und Unterrandstile angewendet.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      input[type="text"],
      input[type="email"],
      input[type="password"] {
         border: 2px solid lightgray;
         padding: 12px;
         font-size: 18px;
         margin-bottom: 15px;
      }
   </style>
</head>
   <body>
      <h3>Selecting text input fields using type attribute</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter username"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
         <label for="password">Password:</label>
         <input type="password" id="password" name="password" placeholder="Enter your Password"><br>
      </form>
   </body>
</html>

Wählen Sie bestimmte Texteingabefelder mit der ID-Auswahl aus

Wir können ID-Selektoren verwenden, um auf bestimmte Texteingabefelder abzuzielen. Der ID-Selektor wird durch das Zeichen „#“ dargestellt, gefolgt vom Wert des ID-Attributs des HTML-Elements. Wenn wir beispielsweise ein HTML-Element haben, dessen ID-Attribut auf „Benutzername“ gesetzt ist, können wir es mit dem folgenden CSS-Selektor auswählen –

#username {
   /* Write CSS rules here */
}

Beispiel 2: Texteingabefeld mithilfe des ID-Attributs auswählen.

In diesem Beispiel verwenden wir die ID-Attributauswahl, um drei Texteingabefelder mit den IDs Name, E-Mail-Adresse und Passwort auszuwählen. Diese CSS-Stile werden auf die drei Eingabefelder angewendet. Auf diese Eingabefelder werden die Stile „Rahmenradius“ und „Hintergrundfarbe“ angewendet.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      input[type="text"], input[type="email"],input[type="password"] {
         border: 2px solid lightgray;
         padding: 12px;
         font-size: 18px;
         margin-bottom: 15px;
      }
      #name, #email{
         background-color: lightgreen;
         border-radius:10px;
      }
   </style>
</head>
   <body>
      <h3>Selecting text input fields using ID attribute</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter username"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
         <label for="password">Password:</label>
         <input type="password" id="password" name="password" placeholder="Enter your Password"><br>
      </form>
   </body>
</html>

Wählen Sie mithilfe von Klassenselektoren mehrere Texteingabefelder aus

Wenn wir mehrere Texteingabefelder mit ähnlichem Stil oder ähnlicher Funktionalität haben, können wir Klassenselektoren verwenden, um sie gezielt auszuwählen. Der Klassenselektor wird durch das Zeichen „.“ gefolgt vom Wert des Klassenattributs des HTML-Elements dargestellt. Wenn wir beispielsweise mehrere HTML-Elemente haben, deren Klassenattribut auf „input-field“ gesetzt ist, können wir sie mit dem folgenden CSS-Selektor auswählen –

.input-field {
   /* write CSS rules here */
}

Dieser Selektor zielt auf alle HTML-Elemente ab, deren Klassenattribut auf „Eingabefeld“ gesetzt ist.

Beispiel 3: Texteingabefeld mithilfe des Klassenattributs auswählen

In diesem Beispiel verwenden wir die Klassenattributauswahl, um drei Texteingabefelder mit den Klassennamen Name, E-Mail, und Passwort auszuwählen. Diese CSS-Stile werden auf die drei Eingabefelder angewendet. Auf diese Eingabefelder werden die Stile „Rahmenradius“ und „Hintergrundfarbe“ angewendet.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      input[type="text"], input[type="email"], input[type="password"]{
         border: 2px solid lightgray;
         padding: 12px;
         font-size: 18px;
         margin-bottom: 15px;
      }
      .password, .search{
         background-color: lightgreen;
         border-radius:10px;
      }
   </style>
</head>
   <body>
      <h3>Selecting text input fields using ID attribute</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter username"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
         <label for="password">Password:</label>
         <input type="password" class="password" id="password" name="password" placeholder="Enter your Password"><br>
      </form>
   </body>
</html>

Fazit

Das Auswählen von Texteingabefeldern mithilfe von CSS-Selektoren ist ein einfacher Vorgang, sobald wir die Struktur von Texteingabefeldern und die verschiedenen verfügbaren CSS-Selektoren verstanden haben. Durch die Verwendung geeigneter CSS-Selektoren können wir Texteingabefelder einfach positionieren und formatieren, um das Benutzererlebnis von Webformularen zu verbessern.

Das obige ist der detaillierte Inhalt vonWie wähle ich ein Texteingabefeld mithilfe der CSS-Auswahl aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html if for select using class 选择器 border background input

Stellungnahme：

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

Vorheriger Artikel：Verwendung von CSS :focus-PseudoklasseNächster Artikel：Verwendung von CSS :focus-Pseudoklasse

In Verbindung stehende Artikel

Mehr sehen