Placeholder should go up while typing input without using required and placeholder attribute using css

后端 未结 1 1166
旧巷少年郎
旧巷少年郎 2021-01-17 06:55

When I type the input field label should go up. otherwise label should be placed inside the input. I have attached the sample image.Please refer the username and password fi

1条回答
  •  南笙
    南笙 (楼主)
    2021-01-17 07:24

    Those are called "floating labels". Have a look at these:

    • https://css-tricks.com/float-labels-css/
    • How to do floating of labels in CSS
    • https://medium.com/simple-human/floating-labels-are-a-bad-idea-82edb64220f6

    You do need to use the placeholder attribute, but you can set it to the HTML entity for a space character ( ), so it's invisible. I wrote this for maximum browser compatibility (except it doesn't work in IE9 or older).

    
    
    
    
    
    
    
    
    
    
    
    

    This works, without JS, in evergreen browsers (Firefox, Chrome, Safari, etc.) and IE10-11. A polyfill is used to support MS Edge (support for the IE10 pseudo-class was removed but the non-prefixed one was not added) and old versions of browsers from other organizations.

    0 讨论(0)
提交回复
热议问题