So verwenden Sie den Pseudoklassenselektor :focus, um den Stil von Formularelementen zu ändern-CSS-Tutorial-php.cn

So verwenden Sie den Pseudoklassenselektor :focus, um den Stil von Formularelementen zu ändern

WBOY

Freigeben： 2023-11-20 12:41:09

Original

1651 Leute haben es durchsucht

So verwenden Sie den Pseudoklassenselektor :focus, um den Stil von Formularelementen zu ändern

Verwendung: Fokussieren Sie den Pseudoklassenselektor, um den Stil von Formularelementen zu ändern

Einführung:

In unserem Webdesign sind Formularelemente gängige interaktive Komponenten, und Benutzer können über Formularelemente mit Webseiten interagieren. Um das Benutzererlebnis und die Ästhetik der Benutzeroberfläche zu verbessern, müssen wir häufig den Stil von Formularelementen ändern, wenn Benutzer mit ihnen interagieren. In diesem Artikel wird erläutert, wie Sie mit dem Pseudoklassenselektor :focus den Stil von Formularelementen ändern und spezifische Codebeispiele bereitstellen.

1. Was ist der :focus-Pseudoklassenselektor?

:focus ist ein Pseudoklassenselektor in CSS3, der zur Auswahl des Elements verwendet wird, das aktuell den Fokus hat. Wenn der Benutzer klickt oder den Fokus über die Tabulatortaste wechselt, wird der :focus-Pseudoklassenselektor wirksam. Mit dem Pseudoklassenselektor :focus können wir Formularelemente unterschiedlich formatieren, um anzugeben, ob sie gerade den Fokus haben.

2. Wie verwende ich den :focus-Pseudoklassenselektor?

Im Folgenden sind einige gängige Formularelemente aufgeführt und was sie verwenden können: Fokus-Pseudoklassenselektor:

Eingabeelement:

input:focus {
  /* 设置表单元素获取焦点时的样式 */
}

Nach dem Login kopieren

textarea-Element:

textarea:focus {
  /* 设置表单元素获取焦点时的样式 */
}

Nach dem Login kopieren

select-Element:

select:focus {
  /* 设置表单元素获取焦点时的样式 */
}

Nach dem Login kopieren

3. Code Beispiel:

Als nächstes geben wir einige spezifische Codebeispiele, um zu demonstrieren, wie man den Pseudoklassenselektor :focus verwendet, um den Stil von Formularelementen zu ändern.

Wenn das Formulareingabefeld den Fokus erhält, ändern Sie die Rahmenfarbe:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type=text]:focus {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <form>
    <label for="name">用户名：</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

Nach dem Login kopieren

Im obigen Code ändert sich die Rahmenfarbe des Eingabefelds in Blau, wenn es den Fokus erhält.

Wenn das Formular-Dropdown-Feld den Fokus erhält, ändern Sie die Hintergrundfarbe:

<!DOCTYPE html>
<html>
<head>
  <style>
    select:focus {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <form>
    <label for="gender">性别：</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
      <option value="other">其他</option>
    </select><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

Nach dem Login kopieren

Im obigen Code ändert sich die Hintergrundfarbe des Dropdown-Felds in Gelb, wenn es den Fokus erhält.

Zusammenfassung:

Durch die Verwendung des :focus-Pseudoklassenselektors können wir Stile für verschiedene Zustände von Formularelementen festlegen, um den Visualisierungseffekt und die Benutzererfahrung der Schnittstelleninteraktion zu verbessern. Gleichzeitig stellen wir den Lesern auch spezifische Codebeispiele als Referenz zur Verfügung. Ich hoffe, dieser Artikel kann den Lesern helfen, den Pseudoklassenselektor :focus besser zu verstehen und anzuwenden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Pseudoklassenselektor :focus, um den Stil von Formularelementen zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!