就是不掉下来，而且变颜色，输入东西的时候还在，也就是鼠标移开不掉下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.form-item {
position: relative;
margin-top: 40px;
}
.form-item label,
.form-item input {
position: absolute;
height: 32px;
line-height: 32px;
top: 0;
left: 10px;
}
.form-item label {
color: #ccc;
transition: all .4s;
z-index: 1;
}
.form-item input {
border: none;
outline: none;
border-bottom: 1px solid #ccc;
background: transparent;
z-index: 2;
}
#olabel{
opacity: 0;
}
.form-item input:focus {
border-color: red;
}
.form-item input:hover + #olabel {
opacity: 1 !important;
color: red;
top: -32px;
}
.form-item input:focus + #olabel {
opacity: 1 !important;
color: red;
top: -32px;
}
</style>
</head>
<body>
<div class="form-item">
<input type="text" id="oinput" value=""/>
<label for="" id="olabel">请输入账号</label>
</div>
<script>
var input = document.getElementById('oinput')
var label = document.getElementById('olabel')
if(input.value !== ''){
label.style.opacity = 0
}else{
label.style.opacity = 1
}
input.onfocus = function(){
if(input.value !== ''){
label.style.opacity = 0
}else{
label.style.opacity = 1
}
}
input.onblur = function(){
if(input.value !== ''){
label.style.opacity = 0
}else{
label.style.opacity = 1
}
}
</script>
</body>
</html>