实现 input 无内容时缩小居中显示，有内容、有焦点时变长显示

实现当input没有内容时，会变窄显示在中心，当有内容和焦点时，会变长显示。需要默认（无内容，无焦点）时显示居中效果。有焦点或内容，输入变长测试地址https://www.lilnong.top/stati...实现思路Vue+css实现我们通过内容的长度动态修改类，实现有内容时的效果input.focus,input:focus{width:100%}我们使用:focus伪类来监听状态重点。之前方案的纯css实现依赖js。有没有不依赖js的？重点是判断是否有内容，我们怎么判断呢？这里有两件事可以依赖。required和:validrequiredrequired属性规定内容必须填写。可用于类型：文本、搜索、url、电话、邮箱、密码、日期选择器、数字、复选框、单选、文件。:valid:valid选择器作用于有限制值的元素，例如input元素中的min和max属性、require、correctemail字段、合法数字字段等。:valid选择器可以在表单取值时设置指定样式元素需要根据指定的条件进行验证。那么问题就很简单了，我们让它成为强制性的，这样就可以根据这个状态来显示样式了。优化关闭按钮在没有内容时不显示。方案一：当然是js方法，判断value.length比较好。方案二：添加一个表单，然后根据表单的:valid判断渲染状态。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。综上所述，js实现当然是兼容性极佳。css实现比较简单，当然兼容性比较感人。.