div替代input输入框

问题: input输入框不能添加背景图片，用div搞一个替代品
需求：
1. placeholder,
2. 选中后框变蓝色，
3. 能输入文字,
4. 用户按钮有反应

思路：
1. .input:empty::before{
content:attr(placeholder)
}
伪类的empty，和before,content属性解决
2. .input:focus{
border-color: #409eff;
}
伪类的focus解决
3. contenteditable属性解决
4. onkeydown属性解决

demo代码如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
        .input{
        	width: 200px;
			background-color: #fff;
		    background-image: none;
			border: 1px solid #ccc;
			border-radius: 4px;
			padding: 0 15px;
			line-height: 40px;
        	font-size: 14px;
        	color: #000;
			outline: none;
		    overflow: hidden;
		    white-space: nowrap;
		    display: block; 
        }
        .input:empty::before{
            color:#ADADAD;
            content:attr(placeholder);
            font-size: 14px;
        }
		.input:focus{
            border-color: #409eff;
		}
	</style>
</head>
<body style="background-color: antiquewhite;">
	  <div id="title" name="title" class="input" contenteditable placeholder="请输入内容" onkeydown="myFunction()"></div>
</body>
<script type="text/javascript">
	function myFunction(){
    	if (window.event && window.event.keyCode == 13) {
            window.event.returnValue = false;
			alert(123);
        }
	}
</script>
</html>

原文链接：https://blog.csdn.net/qq_36238674/article/details/117715083