问题: 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>