Style de didacticiel du formulaire de vérification du développement JS (2)

Regardons le code de la section précédente :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}
        .sub{width:100px;height:30px;padding-left:0px;}

        .sub:hover{background:#ffaad5;}
        .div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;
            border:1px solid red;}
    </style>
    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

Tout d'abord, supprimons le style par défaut de la zone de saisie

attribut de contour

Le code complet est le suivant :

input{outline:none;}

Quand on place le curseur dans la zone de saisie, il sera très loin à gauche, ce qui n'a pas l'air bien, donc on il faut positionner le curseur à une certaine distance de la distance gauche

Généralement, nous utilisons padding-left, mais il y a un problème après l'avoir utilisé, la zone de texte s'allonge, ce qui n'est pas l'effet souhaité <. 🎜>

Donc, quand on ajoute du texte Lors de l'ajout de l'attribut padding-left au curseur de la boîte, il faut d'abord écrire box-sizing:border-box;

box-sizing:border-box; La marge intérieure et la bordure extérieure de l'élément n'augmenteront pas la largeur

Le code complet du style de notre zone de texte est donc le suivant :

input{

outline:none; /*Supprimer la bordure de la zone de texte*
box-sizing:border-box; padding-left:15px;

}

Bien sûr, le champ de texte peut également être utilisé

Ensuite, nous créons une fonction de coin arrondi pour le champ de texte

border-radius:8px;

Par défaut, le champ de texte a deux barres obliques dans le coin inférieur, que nous peut également supprimer.

Nous utilisons resize: none; et c'est tout pour le champ de texte Supprimez la barre oblique

Regardons le code complet ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        input{
            outline:none;
            box-sizing:border-box;padding-left:15px;}
        textarea{
            outline:none;resize : none;
            box-sizing:border-box;padding-left:15px;padding-top:5px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .pwd{width:200px;height:30px;
            margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .txt{
            width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .sub{width:100px;height:30px;padding-left:0px;
            border:none;
            border-radius:5px;background:#ffd0ff;}
        .sub:hover{background:#ffaad5;}
        .div{
            width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}

    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #div{width:410px;height:400px;background:#46a3ff;padding-left:16px; padding-top:20px;} input{ outline:none; box-sizing:border-box;padding-left:15px;} textarea{ outline:none;resize : none; box-sizing:border-box;padding-left:15px;padding-top:5px;} .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .pwd{width:200px;height:30px; margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .txt{ width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .sub{width:100px;height:30px;padding-left:0px; border:none; border-radius:5px;background:#ffd0ff;} .sub:hover{background:#ffaad5;} .div{ width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;} </style> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱好:</label> <textarea rows="5" cols="40" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique