如何制作一个精美的输入框？基本表单中的的账号或密码输入框样式

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￣)づ