CSS自适应的占位符效果

<div style="width:500px;height:500px;margin:300px auto;border: 1px solid red;">
<form style="width: 280px; height: 500px; margin:1em auto;">
<input required='' type='text'/>
<label alt='请输入旧密码' placeholder='请输入旧密码'></label>
<input required='' type='text'/>
<label alt='请输入新密码' placeholder='请输入新密码'></label>
<input required='' type='text'/>
<label alt='请确认新密码' placeholder='请确认新密码'></label>
</form>
</div>

input[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: 0 0 10px;
padding: 12px;
border: 1px solid #cccccc;
border-radius: 5px;
background: #fff;
resize: none;
outline: none;
}
input[type="text"][required]:focus {
box-shadow: 1px 1px 5px #444;
-webkit-transition-duration: .2s;
transition-duration: .2s;
pointer-events: none;
}
input[type="text"][required]:focus + label[placeholder]:before {
color: #000;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate(-110px,10px) scale(0.9, 0.9);
/*-ms-transform: translate(-110px,10px) scale(0.8, 0.8);*/
transform: translate(-110px,10px) scale(0.9, 0.9);
color: #00FFFF;
/*字体缩放*/
}
input[type="text"][required]:invalid + label[placeholder][alt]:before {
content: attr(alt);
}
input[type="text"][required] + label[placeholder] {
display: block;
pointer-events: none;
line-height: 36px;
/*placeholder position*/
margin-top: -webkit-calc(-48px - 2px);
margin-top: calc(-48px - 2px);
margin-bottom: -webkit-calc((40px - 10px) + 2px);
margin-bottom: calc((40px - 10px) + 2px);
}
input[type="text"][required] + label[placeholder]:before {
content: attr(placeholder);
display: inline-block;
margin: 0 -webkit-calc(1em + 2px);
margin: 0 calc(10px + 2px);
padding: 0 2px;
color: #898989;
white-space: nowrap;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-background-size: 100% 5px;
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;
}