有什么ui框架实现这样的输入框？

Question

https://login.docker.com/u/login/

Answer 1

比如：https://v4.mui.com/zh/components/text-fields/
如果你是还没选好框架的话那倒是可以多看看其他，要是只是想要同样的交互效果大可以自己写一个也不复杂

Answer 2

Google Material UI

vue https://www.creative-tim.com/vuematerial/components/input

angular https://material.angular.cn/components/input/overview

react https://mui.com/material-ui/react-text-field/

Answer 3

原生JS写 这个写起来应该也不难

Answer 4

参考页面中,

上图是label的默认样式, 当给input focus后

label多了些样式

所以简单原理就是,
一个input, 然后通过绝对定位, 将label覆盖在input上, 可以设置label穿透鼠标事件, 这样点input时,就不会直接点在label上, 设置input::focus的样式, 同时通过~同级选择器, 设置label的transform动画效果即可, 如缩放, 位移等效果将label移动到input边框位置