Comment utiliser le sélecteur de pseudo-classe :focus pour changer le style des éléments de formulaire-tutoriel CSS-php.cn

Comment utiliser le sélecteur de pseudo-classe :focus pour changer le style des éléments de formulaire

WBOY

Libérer： 2023-11-20 12:41:09

original

1616 Les gens l'ont consulté

Comment utiliser le sélecteur de pseudo-classe :focus pour changer le style des éléments de formulaire

Comment utiliser : focus le sélecteur de pseudo-classe pour changer le style des éléments de formulaire

Introduction :

Dans notre conception Web, les éléments de formulaire sont des composants interactifs courants et les utilisateurs peuvent interagir avec les pages Web via des éléments de formulaire. Afin d'améliorer l'expérience utilisateur et l'esthétique de l'interface, nous devons souvent modifier le style des éléments de formulaire lorsque les utilisateurs interagissent avec eux. Cet article explique comment utiliser le sélecteur de pseudo-classe :focus pour modifier le style des éléments de formulaire et fournit des exemples de code spécifiques.

1. Qu'est-ce que le sélecteur de pseudo-classe :focus ?

:focus est un sélecteur de pseudo-classe en CSS3, qui est utilisé pour sélectionner l'élément qui a actuellement le focus. Lorsque l'utilisateur clique ou change de focus via la touche Tab, le sélecteur de pseudo-classe :focus prendra effet. Avec le sélecteur de pseudo-classe :focus, nous pouvons styliser les éléments de formulaire différemment pour indiquer s'ils ont actuellement le focus.

2. Comment utiliser le sélecteur de pseudo-classe :focus ?

Voici quelques éléments de formulaire courants et ce qu'ils peuvent utiliser : sélecteur de pseudo-classe focus :

élément d'entrée :

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

Copier après la connexion

élément textarea :

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

Copier après la connexion

élément select :

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

Copier après la connexion

3. Code Exemple :

Ensuite, nous donnons quelques exemples de code spécifiques pour montrer comment utiliser le sélecteur de pseudo-classe :focus pour modifier le style des éléments de formulaire.

Lorsque la zone de saisie du formulaire obtient le focus, changez la couleur de la bordure :

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

Copier après la connexion

Dans le code ci-dessus, lorsque la zone de saisie obtient le focus, sa couleur de bordure passe au bleu.

Lorsque la zone déroulante du formulaire obtient le focus, changez la couleur d'arrière-plan :

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

Copier après la connexion

Dans le code ci-dessus, lorsque la zone déroulante obtient le focus, sa couleur d'arrière-plan passe au jaune.

Résumé :

En utilisant le sélecteur de pseudo-classe :focus, nous pouvons définir des styles pour différents états des éléments de formulaire afin d'améliorer l'effet de visualisation et l'expérience utilisateur de l'interaction de l'interface. Dans le même temps, nous fournissons également des exemples de code spécifiques pour référence aux lecteurs. J'espère que cet article pourra aider les lecteurs à mieux comprendre et appliquer le sélecteur de pseudo-classe :focus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser le sélecteur de pseudo-classe :focus pour changer le style des éléments de formulaire