Introduction aux étiquettes flottantes en CSS (avec cas)

Cet article vous présente une introduction aux étiquettes flottantes en CSS (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans les projets Web, il existe un module très important qui est le module de connexion/inscription. La partie principale de ce module est un formulaire. Ce formulaire contient deux groupes de saisie importants (nom d'utilisateur/mot de passe). Le groupe contient une étiquette et une entrée, et il existe différents plans de disposition pour étiquette + entrée. Différents concepteurs ont des styles de conception différents, et différents ingénieurs front-end ont des méthodes d'implémentation différentes. Par comparaison, nous avons constaté que la solution actuelle se concentre à la fois sur l’esthétique et la performance.

Alors, quels sont les plans de mise en page pour l'étiquette et l'entrée ?

Le plan de mise en page de l'étiquette+de l'entrée

1. sera l'étiquette et l'entrée (invite de mot-clé palcholder) sont divisées en parties supérieure et inférieure ; // Utilisé il y a longtemps, utilisez maintenant occasionnellement

2. pour diviser l'étiquette et l'entrée (invite de mot-clé palcholder) en parties gauche et droite (l'étiquette occupe une certaine largeur et la police de l'étiquette adopte trois solutions courantes : alignée à gauche, alignée à droite et alignée aux deux extrémités) ; // Cas : connexion Weibo, page de connexion jd wap ; , etc.

3. L'étiquette et l'entrée (invite de mot-clé palcholder) sont toujours divisées en parties gauche et droite. La différence est que la police dans l'étiquette est remplacée par une icône // ; Cas : page de connexion de la communauté de défauts de segment, etc.

4. Contient uniquement une entrée (indice de mot-clé palcholder) ; // Cas : page de connexion de la communauté de développement Mobile Taobao, page de connexion de la communauté de développement Nuggets, etc.

5. Affiche uniquement l'entrée (invite de mot-clé palcholder) et l'étiquette est flottante et masquée Lorsque l'événement focus de l'entrée est déclenché, l'étiquette est affichée. // Cas : la page de connexion précédente du mobile Taobao, ou se référer à JVFloatLabeledTextField, etc.

Chacune de ces solutions a ses propres avantages et inconvénients. Utiliser la police d'étiquette et la remplacer par. une icône est plus vive, mais elle ajoute l'accès à l'URL de l'icône ; le nombre de polices dans l'étiquette est incohérent, semble inesthétique et le nombre de mots est le même. Cette solution ne peut être considérée que comme satisfaisante en supprimant directement l'étiquette ; peut rendre l'interface simple et belle, mais l'étiquette a la fonction d'une étiquette (qui sera discutée en détail ci-dessous) et un espace réservé); l'utilisation d'une étiquette flottante augmente l'effet d'animation, mais nécessite l'introduction de js Les performances de cette solution. est évidemment supérieur à celui de ne pas utiliser js (il existe une solution qui n'utilise pas js, mais la compatibilité n'est pas très bonne).

label vs placholder

label : Décrit le rôle de l'élément de formulaire, utilisé pour spécifier que l'entrée est le nom du champ unique

placeholder : Il invite l'utilisateur à saisir le format du contenu

Les deux semblent similaires, mais leurs responsabilités sont différentes. De nombreux étudiants ont commis de grosses erreurs ici.

Si vous avez besoin d'en savoir plus à leur sujet, veuillez vous référer à MDN

Étiquette animée (no-js)

Page pour l'interaction de l'utilisateur à la Dans le même temps, l'interaction de l'utilisateur avec l'animation est souvent plus facile à impressionner les utilisateurs. Ce qui suit présente une étiquette flottante implémentée à l'aide de pseudo-classes.

Code HTML :

<div class="input-group">
    <input type="text" id="userName" placeholder="用户名/邮箱/卡号">
    <label for="userName">账号</label>
</div>

Code CSS de mise en page de base :

.input-group {
    position: relative;
    margin: 100px 20px;
    font-size: 16px;
}

.input-group>input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    line-height: 1.0;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0.4em;

    transition: box-shadow 0.3s;
}

.input-group input::placeholder {
  color: #cdcdcd;
}

.input-group>input:focus {
    outline: none;
    box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
}

.input-group>label {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: -1;
    
    visibility: hidden;
    color: #050505;
    opacity: 0;
}

Tout d'abord, définissez la position de l'étiquette (position : absolue) et définissez son niveau ( z-index : -1), visibilité : caché, transparence (opacité : 0) ;

Ensuite, le style d'espace réservé de l'entrée est défini, qui peut être défini à l'aide du pseudo element::placeholder Son style ;

Enfin, un effet d'animation de transition est défini lorsque l'étiquette de l'élément d'entrée obtient le focus, la pseudo classe : focus est utilisée pour définir le style d'ombre (box-shadow) et le style de contour lorsque l'étiquette de l'élément d'entrée obtient le focus. . (contour).

style d'effet flottant d'étiquette

 .input-group>label {
      ...

      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translate3d(0, 0, 0) scale(0);
              transform: translate3d(0, 0, 0) scale(0);
      -webkit-transition:
          opacity 0.3s,
          visibility 0.3s,
          transform 0.3s,
          z-index 0.3s;
          
              transition:
                  opacity 0.3s,
                  visibility 0.3s,
                  transform 0.3s,
                  z-index 0.3s;
 }

.input-group>input:focus ~ label {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, -36px, 0) scale(1);
        transform: translate3d(0, -36px, 0) scale(1);
}

Dans la collection qui définit le style d'étiquette, ajoutez son effet de déformation de transformation initial, définissez le style d'effet de transition de transition, puis définissez-le lorsque l'entrée est obtenue focus, Le style de l'étiquette de son élément frère est suffisant.

L'effet de cette étiquette flottante est différent de celui de JVFloatLabeledTextField. La première obtient le focus et l'étiquette commence à flotter immédiatement, tandis que la seconde se produit lorsque l'utilisateur saisit du contenu (c'est-à-dire lorsque l'espace réservé disparaît). , l'étiquette commence à flotter.

Pour que les deux aient le même effet, nous pouvons utiliser la fonctionnalité selon laquelle les pseudo-classes peuvent être imbriquées et modifier .input-group>input:focus ~ label en .input-group>input:focus:not( :placeholder -shown) ~ label, ici : placeholder-shown peut définir l'effet visible et caché de l'espace réservé, mais sa compatibilité n'est pas très bonne, c'est-à-dire que/edge ne le prend pas du tout en charge, Chrome, Safari et Firefox le peuvent. Cas :

démo

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!