JS开发验证表单教程之样式(二)
我们先看一下上节的代码:
<!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>
首先我们来去除 input 框的默认样式
outline属性
完整代码如下:
input{outline:none;}
当我们把光标当在 input 框里面的时候,会很靠左,这样就不好看了,所以我们要把光标的位置距离左边有一定的距离
一般我们使用padding-left,但是会有个问题,使用之后文本框也变长了,这就不是我们想要的效果了
所以当我们在给文本框的光标加上padding-left属性的时候,我们要先写box-sizing:border-box;
box-sizing:border-box; 元素的内边距和外边框不会增加宽度
所以我们文本框的样式完整代码如下:
input{
outline:none;/*去除文本框的边框*
box-sizing:border-box; padding-left:15px;
}
当然文本域也是可以使用的
接下来我们给文本域做一个圆角的功能
border-radius:8px;
文本域我们默认看有下角会有俩条斜线,这个我们也是可以去除的
我们使用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>