JS開発検証フォーム チュートリアル形式(2)
前のセクションのコードを見てみましょう:
<!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>
まず、入力ボックスのデフォルトのスタイルを削除しましょう
outline属性
完全なコードは次のとおりです:
input{outline:none;}
入力にカーソルを置いた場合 ボックス内にあるとかなり左に寄ってしまい見栄えが悪いので、カーソル位置を左から一定の距離に保つ必要があるので、通常はpadding-leftを使用します。 、しかし、問題があります。使用後、テキストボックスも変化します。長すぎます。これは私たちが望んでいる効果ではありません
そのため、テキストボックスのカーソルにpadding-left属性を追加するときは、最初に次のように記述する必要があります。 box-sizing: border-box;
box-sizing: border-box; 要素の内側のマージンと外側の境界線によって幅は増加しません
したがって、テキスト ボックスのスタイルの完全なコードは次のとおりです:
input{
アウトライン: none;/*テキストボックスの枠線を削除します* border-box;padding-left:15px;
}
もちろんテキストフィールドも使用できます
次に、角丸を作成します。テキスト フィールドのコーナー関数
border-radius:8px;
デフォルトではテキスト フィールドが 2 つあることがわかります。これを削除するには、resize: none; を使用します。以下の完全なコードを見てみましょう:
<!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>