html初始表单控件的默认样式十分简陋，呈现给用户的效果并不完美，今天本文就展示一个既简单又非常泛用的输入框样式，话不多说，直接开造 ᶘ ᵒᴥᵒᶅ
首先html结构：外面包裹一个盒子，里面一个input输入框和一个div标签
<div class="account"> <div class="account_title">账号</div> <div class="account_box"> <input type="text" name="" id="account_inp" placeholder="请输入帐号" oninput="btn(this)"> <img src="./img/下箭头(搜索).png" alt=""> </div> <div class="account_text">收款账户不能为空</div> </div>
初始结构：
样式代码：
.account { width: 300px; height: 90px; border-radius: 5px; padding-right:10px; margin: 50px; } .account_box { width: 390; height: 30px; border: 1px solid #DCDFE6; border-radius: 5px; padding: 0 10px; margin-top: 10px; display: flex; align-items: center; } .account_box>input { height: 90%; width: 254px; border: none; outline: none; } .account_box>img { width: 16px; height: 16px; transition: 0.2s; } .account_title{ height: 18px; font-size: 14px; } .account_text{ font-size: 14px; color: red; }
效果：
红色的提示信息要添加隐藏，待用户输入错误时再显示
js部分，先引入jqery文件，再进行编写：
// 触发input事件后获取输入框中的值 function btn(text){ // 判断是否为空,如果为空让红字显示， if($(text).val() == ""){ // jqery自带的动画,非常好用 $(".account_text").slideDown(200) }else{ $(".account_text").slideUp(200) } }
看最终效果：
是不是 非——常——的简单 o((>ω< ))o
谢谢大家观看，作者纯新人，希望路过的大佬多多批评(づ￣ 3￣)づ
