专业软件开发费用 超赞！只需几步，打造高颜值的CSS表单！（附代码）
你好，我是云桃桃。
一个但愿匡助更多一又友快速初学 WEB 前端的圭表媛。
七月好运滚滚来 重庆下半年首注头奖花落奉节
序言今天，咱们来用 CSS 好意思化一下表单位素，它果真可使用绝大大都 CSS 属性进行方式筹算。
OK专业软件开发费用，那来一都望望吧。
表单的 CSS好意思化前。
图片
好意思化后，是不是漂亮多了。
图片
还不错加入小动画。
图片
app因为没太多的生疏属性，无需过多莳植。即使有生疏的在安宁里已标注，那咱们一都来看下代码，学习下吧~
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，本文完。
本站仅提供存储劳动，统共执行均由用户发布，如发现存害或侵权执行，请点击举报。