Que signifie le focus en HTML-Questions et réponses frontales-php.cn

Que signifie le focus en HTML

醉折花枝作酒筹

Libérer： 2023-01-06 11:16:26

original

9139 Les gens l'ont consulté

En HTML, focus signifie "focus". Le sélecteur ":focus" est utilisé pour sélectionner l'élément qui a reçu le focus. Il vous suffit de définir le style "element:focus{attribute:attribute value}" sur l'élément. ":focus" est une pseudo-classe qui s'applique à un élément qui a le focus. Le sélecteur est appliqué pour le moment où l'élément a le focus.

Que signifie le focus en HTML

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

: Le sélecteur de focus est utilisé pour sélectionner l'élément qui reçoit le focus.

:focus est une pseudo-classe qui s'applique aux éléments qui ont le focus.

: le focus s'applique au moment où l'élément a le focus.

Tout élément pouvant recevoir des événements de clavier ou d'autres entrées utilisateur peut utiliser le sélecteur :focus Dans la plupart des cas, le sélecteur :focus est utilisé sur les liens et les éléments de formulaire.

Exemple :

a:focus {outline: 1px  dotted red;}
input:focus {background: yellow;}

Copier après la connexion

Remarque : :focus fonctionne sur IE8, DOCTYPE doit avoir été déclaré

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      input:focus {
        outline: 0;
        /* 去除浏览器默认样式 */
        border: 2px solid rgb(238, 175, 238);
        background-color: rgb(255, 230, 192);
        text-shadow: 1px 1px saddlebrown;
      }
    </style>
  </head>
  <body>
    <p>点击文本输入框表单可以看到紫色边框和橘色背景:</p>
    <form>
      用户名: <input type="text" name="username" /><br />
      密　码: <input type="password" name="password" />
    </form>
  </body>
</html>

Copier après la connexion

Rendu :

Que signifie le focus en HTML

Remarque :

En général, le navigateur ajoute automatiquement un contour autour de l'élément lorsque l'élément de formulaire obtient le focus. Le style ajouté par le navigateur est unique à chaque navigateur. les styles, et souvent, les styles par défaut sont différents d’un navigateur à l’autre.

Mais pour la beauté globale de la page et la compatibilité du style du navigateur, nous devons souvent modifier le style de l'élément lorsqu'il obtient le focus et remplacer le style par défaut par notre propre style.

À ce stade, nous pouvons utiliser le sélecteur css :focus pour définir le style par défaut de l'élément lorsque le navigateur obtient le focus.

Apprentissage recommandé : Tutoriel vidéo HTML

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!