你好影音先锋播放，我是云桃桃。
一个但愿匡助更多一又友快速初学 WEB 前端的花样媛。
绪论今天，咱们来用 CSS 好意思化一下表单位素，它险些可使用绝大多量 CSS 属性进行神志筹划。
OK影音先锋播放，那来沿路望望吧。
表单的 CSS好意思化前。
图片
好意思化后，是不是漂亮多了。
图片
还不错加入小动画。
图片
因为没太多的生疏属性，无需过多培植。即使有生疏的在留神里已标注，那咱们沿路来看下代码，学习下吧~
CSS：
动漫里番 * { font-family: '微软雅黑'; margin: 0; padding: 0; box-sizing: border-box; } /* 提醒文本的神色，也即是未输入之前的placeholder属性的神色 */ ::placeholder { color: #986ef4; /* 这里是为了便捷看出来成就为紫色，频繁为黑灰色，浅灰色一类 */ } div[class^='box'] { width: 800px; margin: 20px 0px 10px 20px; } h4 { line-height: 40px; } .box1-element input， .box1-element select， .box1-element textarea { width: 800px; /* 成就宽度 */ } .box1 input， .box1 select， .box1 textarea { height: 30px; /* 成就高度 */ padding: 0px 15px; /* 成就内边距 */ margin-bottom: 18px; /* 成就外边距 */ border: 1px #33d182 solid; border-radius: 3px; /* 成就边框圆角 */ font-size: 14px; /* 成就字体大小 */ color: #e66ba0; /* 成就字体神色为腮红粉色 */ line-height: 30px; /* 成就行高 */ background: rgba(51， 209， 130， 0.1); /* 成就配景神色为浅绿色 */ } .box1 input:focus， .box1 textarea:focus { outline: 2px #33d182 solid; /* 光标聚焦input的技艺，更动输入框的外边为绿色 */ background: rgba(51， 209， 130， 0.3); /* 成就配景神色为浅绿色 */ } .box1 textarea { height: 180px; /* 成就高度 */ resize: none; /* 在长文本框的右下角，谢绝让用户拖动更动大小 */ } .box1 select option { line-height: 30px; /* 成就行高 */ } .box2 input { } /* 成就按钮的神志 */ .box3 input[type='button']， .box3 input[type='submit']， .box3 input[type='reset'] { background: #33d182; font-size: 16px; letter-spacing: 2px; /* 成就字间距 */ border: none; color: #fff; width: 200px; line-height: 40px; margin-right: 15px; cursor: pointer; /* 鼠标悬停时，流露小手 */ } .box2 .with-user-icon { padding: 0px 30px; background: url(img/heart-fill.png) no-repeat 4px center; } .box2 input[type='text'] { width: 100%; line-height: 30px; transition: width 0.4s ease-in-out; /* 成就动画截止平滑一些 */ } .box2 input.with-animation { width: 200px; /* 成就启动宽度 200px */ } .box2 input[type='text']:focus { width: 100%; /* 聚焦的技艺，将input宽度从200像素到百分之百的800像素 */ } .box1-1-element input， .box1-1-element select， .box1-1-element textarea { width: 720px; /* 成就宽度 */ } .box1-1 label { display: block; float: left; width: 80px; font-size: 14px; line-height: 30px; text-align: right; }HTML：
<div class="box1 box1-element"> <h4>表单基础项神志修改</h4> <input type="text" placeholder="请输入用户名" /> <input type="password" name="pwd" id="" placeholder="请输入密码" /> <input type="number" name="age" id="" placeholder="请输入年事" /> <select name="city" id=""> <option value="">请摄取城市</option> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select> <textarea name="" id=""> 你好啊！！！</textarea> </div> <div class="box2"> <h4>带图场地输入框：</h4> <input class="with-user-icon" type="text" placeholder="请输入用户名" /> <h4>带动画的输入框：</h4> <input class="with-animation" type="text" placeholder="请输入用户名" /> </div> <div class="box1 box1-1 box1-1-element"> <h4>带左侧翰墨的输入框:</h4> <div> <label for="user">用户名：</label> <input name="user" type="text" placeholder="请输入用户名" /> </div> <div> <label for="pwd">密码：</label> <input name="pwd" type="password" placeholder="请输入密码" /> </div> <div> <label for="age">年事：</label> <input name="age" type="number" placeholder="请输入年事" /> </div> <div> <label for="city">城市：</label> <select name="city"> <option value="">请摄取城市</option> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select> </div> </div> <div class="box3"> <h4>表单按钮神志修改</h4> <input type="reset" value="重置" /> <input type="button" value="按钮" /> <input type="submit" value="提交" /> </div>
OK，本文完。
本站仅提供存储做事，通盘实质均由用户发布，如发现存害或侵权实质，请点击举报。