实现效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS控制表单样式</title><link rel="stylesheet" type="text/css" href="form.css"></head><body><form action="#" method="post"><p><span>账号：</span><input type="text" name="username" value="admin" class="num" pattern="^[a-zA-z][a-zA-Z0-9_]{4,15}$"/></p><p><span>密码：</span><input type="password" name="password" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/></p><p><input type="button" class="btn01" value="登录"/><input type="button" class="btn02" value="注册"/></p></form></body></html>
form.css
body{font-size: 12px; font-family: "宋体";}body,form,input,p{padding: 0; margin: 0;border: 0;}form{width: 320px;height: 150px;padding-top: 20px;margin: 50px auto;background: #f5f6fd;border-radius: 20px;border: 3px solid #4faccd;}p{margin-top: 17px; text-align: center;}p span{width: 40px;display: inline-block;text-align: right;}.num,.pass{width: 153px;height: 16px;border:2px solid #35a1df;/* 22px:给图标留出位置 */padding: 2px 2px 2px 22px ;}.num{background: url(img/1.png) no-repeat left center #fff;background-size: 15px;color: #999;}.pass{background: url(img/2.png) no-repeat left center #fff;background-size: 15px;}.btn01,.btn02{width: 60px;height: 26px;border-radius: 3px;border: 2px solid #6b5b60;margin-left:30px ;}.btn01{background: #3bb7ea;}.btn02{background: #fbbc18;}
复合属性的写法 书写格式 background : background-color background-image background-repeat background-attachment background-position; 默认值 background: transparent none repeat scroll 0% 0%;
上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，
Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。
至于正则表达式，我还是喜欢在JS里面单独判定给出提示
对了，图标也放在这里吧：
