Maison > Article > interface Web > css : utilisation de la pseudo-classe focus

css : utilisation de la pseudo-classe focus

一个新手original: 2017-10-20 09:15:262194parcourir

En CSS : utilisation de la pseudo-classe focus, c'est-à-dire définition de styles pour les éléments qui ont reçu le focus

Exemple 1

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>:focus</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input:focus{
            background: #cbcbcb;
        }
    </style></head><body>
    <input type="text"/></body></html>

Ce qui précède est transmis : focus définit le style de la zone de saisie lorsqu'elle obtient le focus

Exemple 2

: Lorsque le focus est utilisé dans la barre de navigation de la page, l'exemple de code est le suivant suit :

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>:focus</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            margin: 0 20px;
        }
        ul li a{
            text-decoration: none;
        }
        ul li a:focus{
            color: #ff290a;
        }
    </style></head><body>
    <ul>
        <li><a href="javascript:;">博客园</a></li>
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">联系</a></li>
        <li><a href="javascript:;">管理</a></li>
    </ul></body></html>

Supplément :

Lorsque l'élément obtient le focus, si l'élément est un lien valide, vous pouvez saisir l'adresse du lien en appuyant sur la touche "Entrée"

; Vous pouvez également appuyer sur la touche « Tab » sur la page, parcourir tous les éléments focalisables pour obtenir le 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelle est la différence entre l'attribut img alt et title ?Article suivant：Quelle est la différence entre l'attribut img alt et title ?

Articles Liés

Voir plus