纯css实现自定义输入框placeholder

Aurora

效果图:

主要是用伪类选择器:not(:placeholder-shown)来判断输入框的输入状态，再利用父子盒子的定位来设置自定义placeholder的位置，可以做到placeholder的颜色、位置、字体等样式自定义，实现输入框的高度定制，相对于js实现的优势

• 使代码更加简洁易读。
• 使用CSS样式可以将样式和结构分离，便于后期维护和修改
  
• CSS样式在浏览器渲染时会被缓存，可以提高页面加载速度，提高用户体验。
  
• 兼容性好
  

附代码：