Explication détaillée de l'utilisation des sélecteurs en lecture-écriture et en lecture seule-tutoriel CSS-php.cn

Explication détaillée de l'utilisation des sélecteurs en lecture-écriture et en lecture seule

云罗郡主

Libérer： 2018-11-21 17:09:53

avant

2604 Les gens l'ont consulté

Cet article vous apporte une explication détaillée de l'utilisation des sélecteurs en lecture-écriture et :read-only. 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.

:sélecteur lecture-écriture et : lecture seule

Dans les formulaires Web, certains éléments de formulaire (tels que les zones de saisie, les champs de texte, etc.) ont "lecture-écriture" et "lecture -seulement" "Ces deux états. Par défaut, ces éléments de formulaire sont à l'état « lisible et inscriptible ».

En CSS3, nous pouvons utiliser le sélecteur :read-write et :read-only pour définir respectivement les styles CSS des états "lecture-écriture" et "lecture seule" de l'élément de formulaire.

Exemple de code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 :read-write与:read-only选择器</title>
    <style type="text/css">
        input[type="text"]:read-write
        {
            outline:1px solid #63E3FF;
        }
        input[type="text"]:read-only
        {
            background-color:#EEEEEE;
        }
    </style>
</head>
<body>
    <form>
        <p><label for="text1">读写:</label><input type="text" name="text1"/></p>
        <p><label for="text2">只读:</label><input type="text" name="text2" readonly="readonly"/></p>
    </form>
</body>
</html>

Copier après la connexion

L'effet d'aperçu dans le navigateur est le suivant :

Explication détaillée de lutilisation des sélecteurs en lecture-écriture et en lecture seule

Ce qui précède est la comparaison entre la lecture -write et :read- Une introduction complète à l'utilisation détaillée du sélecteur unique Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention au site Web PHP chinois.

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!