朋友们，今天咱们就来说说如何用CSS做出既美貌又好用的输入框。随着网站设计更加注重用户体验，漂亮的输入框让人感觉更舒适。这个就是个实用的小窍门，快来看看咋弄！
输入框的基本结构
你明白了吗？输入框有提示和输入两部分。那个叫‘label’的标签，其实就是给提示文本安个小窝，然后用‘for’属性让它跟着输入框的’id’走。这样，只要点一下提示，就可以快速跳转到输入框，是不是很方便呀？
好了，搞定了！你现在就可以随便玩这个输入框。对了，让我们把它打扮漂亮点怎么样？
美化输入框的样式
咱俩换换座位和字号，让画面看着更舒心些呗。然后，挑个合适的背景色，大约就是那种`rgb(54,54,54)`的感觉，那就让它来做咱们新背景的颜色好了，这样肯定会让页面变得更好看。
.user_name {
position: relative;
width: 400px;
height: 200px;
}
你觉得光换一下边框颜色还不够酷炫吗？那你就错！现在我要告诉你一招，就是用`outline`这个小工具，让你的边框更加炫酷。看一下图，你会发现新的红色边框外还有一圈绿色的边线，是不是很有层次感？而且，在新红框下方还有一条宽度为2像素的蓝色边线，这样看起来是不是更舒服了？
.user_name{
width: 200px;
height: 50px;
position: absolute;
top: 50px;
left: 30px;
font-size: 20px;
}
用绝对定位实现提示语句的位置调整
你瞅瞅那个效果图，我还没敲打键盘，提示就已经准备好了！这就是我们用绝对定位搞出的神操作。把提示插入到输入框里一秒钟，专业感立马提升！
实现输入框的交互效果
#userName{
display: inline-block;
width: 300px;
height: 30px;
color: #0FF;
font-size: 20px;
border: 0px transparent;
border-bottom: 2px solid #fff;
background-color: rgb(54, 54, 54);
}
这输入框挺好，不过还差点特色，不够吸引人。我们来让它焕发新活力！
当你滑过输入框时，上面的提示字会动起来！看它字体变得小小滴、颜色变成靓丽的亮色，悬浮在框子上方呢～这种炫酷的效果就是通过CSS动画做出来的哟。只需在用户点开输入框那一瞬间，给提示字加点动态效果就搞定！
焦点转到别的地方后可千万别忘记瞅一眼键盘上是否还有字。啥也没有？那就麻利地把提示字移回去再加大点，让操作起来更舒心嘛!
#userName:focus{
outline: none;
border-bottom: 2px solid #0FF;
}
使用jQuery来操作动画
咱们赶快用jQuery这个好用的玩意儿搞点特效看看，简单来说就是定义”类”表示动画，通过jQuery就能轻松换修改或删除了。无论啥时候要更改输入框样式，都是小事一桩！
总结
.userNameTip{
position: absolute;
top: 0px;
left: 0px;
font-size: 20px;
color: #fff;
}
刚看完如何制作炫酷输入框的教学，是不是觉得特简单？没错滴，只要用CSS搞定位置，再运用jQuery和代码动画技术，你就可以随心所欲操控这个超赞画面！期待大家都能轻松掌握~以后做网页设计时，也能轻松打造出漂亮的输入框！
好，大致看下这个输入框。想说什么？快留言告诉我别忘了点赞后分享给其他人！
评论0