一、前言
输入框也是前端中不可或缺的一个控件，常用于账号、密码输入等地方。
不过还是老规矩，我们首先直接用div标签来实现一个编辑框，后面再用输入框控件来简化代码。
注意：本系列文章主要介绍的是如何通过html、css、js原生代码实现各种效果，并不会太深究某个属性、函数的用法，这个东西可以自己浏览器搜一搜就行了，前端资料可以说是各种编程语言中最丰富的了。
二、代码实现
基本操作就不再赘述了，还不会的可以参看前文，首先完成代码结构如下：
默认情况下，div标签是没有编辑功能的，所以我们需要给它添加一个属性contenteditable，启用它的编辑功能：
当然它的宽高也是要设置的，然后下一步，我们来慢慢调整它的样式。
1.修改样式
首先是设置一下它的边框：
然后再取消它的轮廓，同时设置一下它聚焦时的边框颜色：
再设置一下它的内边距和字体大小：
内边距的目的是让文字别紧挨边框，不好看，字体大小可以自己调整到比较合适的数值。
然后再让它文本垂直居中一下：
垂直居中的方法是让行高等于标签高度，前面也提到过，后面不再赘述了。
还可以设置一下字体颜色：
2.添加占位符
然后还有输入框的占位符，实现起来就要稍微麻烦一点了：
这里用到的是伪选择器，首先使用::before来创建一个.self_input标签的子标签。
按F12进入控制台中元素页面，是可以看见它的：
content属性可以给它设置文本内容，然后我们还要再将其位置调整到我们标签的中间，使用的是css的定位功能：
position: absolute;
top: 0px;
left: 10px;
注意这里使用的是绝对定位：absolute，它的定位原理是挨个往外层找到第一个也使用了定位的标签，所以我们需要在父标签中设置一个相对定位：
相对定位是相对于自己原本位置进行移动的，但由于在self_input标签中我没有使用lelf、top等偏移位置属性，所以它还是在原来的位置。
但此时它的子标签的绝对定位却能找到它作为基准，也就是前端常说的：子绝父相。
通过top设置偏移0，left偏移10px，就实现了让这个伪元素标签的位置放在了以父标签左上角为原点，据上边0像素，距离左边10px像素的效果，刚好比较居中。
至于颜色、字体大小就不说了，还有一个pointer-events属性，设置为none的目的是让它别触发鼠标相关的事件，免得后面影响我们标签。
至于后面两个就比较简单了：
意思就是在self_input中内容为空的时候，将这个伪元素显示出来，不为空则隐藏。
display在基础篇提到过，可以更换标签的三种显示模式：块模式、行内块模式、行内模式。
这里用none则代表隐藏、不显示的意思。
至于这个:empty与:not，也是选择器，:empty表示选择为空、没有子元素的标签，而:not意思就是取反，也就是有子元素标签、内容的时候被选中。
这样当我们输入内容时，有了内容，那么第一个:empty就不会被选中，同时第二个:not会被选中，也实现了隐藏的目的，反之同理。
3.操作内容
上面基本完成了编辑框的基本样式功能，下面我们再来看一下如何操作输入框中的内容。
首先是获取、设置编辑框中的文本内容：
方法很简单，直接使用它上面的textContent属性即可完成设置与获取。
然后还有监视用户输入操作：
