一、前言
输入框也是前端中不可或缺的一个控件，常用于账号、密码输入等地方。
不过还是老规矩，我们首先直接用div标签来实现一个编辑框，后面再用输入框控件来简化代码。
注意：本系列文章主要介绍的是如何通过html、css、js原生代码实现各种效果，并不会太深究某个属性、函数的用法，这个东西可以自己浏览器搜一搜就行了，前端资料可以说是各种编程语言中最丰富的了。
二、代码实现
基本操作就不再赘述了，还不会的可以参看前文，首先完成代码结构如下：
默认情况下，div标签是没有编辑功能的，所以我们需要给它添加一个属性contenteditable，启用它的编辑功能：
当然它的宽高也是要设置的，然后下一步，我们来慢慢调整它的样式。
1.修改样式
首先是设置一下它的边框：
然后再取消它的轮廓，同时设置一下它聚焦时的边框颜色：
再设置一下它的内边距和字体大小：
内边距的目的是让文字别紧挨边框，不好看，字体大小可以自己调整到比较合适的数值。
然后再让它文本垂直居中一下：
垂直居中的方法是让行高等于标签高度，前面也提到过，后面不再赘述了。
还可以设置一下字体颜色：
2.添加占位符
然后还有输入框的占位符，实现起来就要稍微麻烦一点了：
