前端 CSS 经典:模拟 material 文本框

效果

思路 

定义三个元素,文本框,下划线,占位文字。input 聚焦时通过 ~ 选中兄弟元素,利用 required 属性 + css 中的 valid 验证,判断 input 中是否有输入。写入过渡效果。

实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>.form-item {width: 200px;height: 30px;margin: 200px auto;position: relative;border-bottom: 2px solid #000;}.form-item input:focus,.form-item input:focus-visible,.form-item input {position: absolute;top: 0;left: 0;border: none;inset: 0;outline: none;}.form-item label {left: 0;top: 0;position: absolute;transition: 0.4s ease;}.form-item .bar {position: absolute;display: block;transform: translate(-50%, -50%);background: #5264ae;transition: 0.4s ease;bottom: -4px;left: 50%;width: 0%;height: 2px;}.form-item input:focus ~ .bar {width: 100%;}.form-item input:valid ~ label,.form-item input:focus ~ label {color: #5264ae;transform: translateY(-30px);font-size: 16px;}</style></head><body><div class="form-item"><input required id="username" type="text" /><span class="bar"></span><label for="username">User Name</label></div><script></script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35354.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深圳,不止是“搞钱之都”

深圳又结结实实火了一把。 “建议深圳人吃饭不要谈工作”&#xff0c;这条微博话题热度飙升&#xff0c;超过五百多万人围观&#xff0c;引来无数网友吐槽“深圳人饭局的真实写照”。 从高档粤菜包间到路边小摊&#xff0c;从茶餐厅到烧烤摊&#xff0c;深圳人吃饭似乎总绕不…

【RF Transceiver】ADRV9040 THEORY OF OPERATION

工作原理 概述 GENERAL 该 ADRV9040 是一款高度集成的射频收发器&#xff0c;能够针对各种应用进行配置。该器件集成了在单个器件中提供所有发射器、流量接收机和观测接收机功能所需的所有射频、混合信号和数字模块。可编程性使该器件能够适应 TDD 模式下的许多 3G/4G/5G 蜂窝…

2025秋招NLP算法面试真题(十一)-Transformer的并行化

正文 本文主要谈一下关于 Transformer的并行化。文章比较短&#xff0c;适合大家碎片化阅读。 Decoder不用多说&#xff0c;没有并行&#xff0c;只能一个一个的解码&#xff0c;很类似于RNN&#xff0c;这个时刻的输入依赖于上一个时刻的输出。 对于Encoder侧&#xff1a; …

【STM32】USART串口通讯

1.USART简介 STM32芯片具有多个USART外设用于串口通讯&#xff0c;它是 Universal Synchronous Asynchronous Receiver and Transmitter的缩写&#xff0c; 即通用同步异步收发器可以灵活地与外部设备进行全双工数据交换。有别于USART&#xff0c; 它还有具有UART外设(Univers…

淘客返利系统的多租户架构设计

淘客返利系统的多租户架构设计 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 引言 随着电子商务的迅猛发展&#xff0c;淘客返利系统在市场上得到了广泛的应…

Vue2中为啥不用 Object.defineProperty 实现响应式数组 ? 不能监听到数组变化吗?

Vue2.0 对于数据响应式的实现上是有一些局限性的&#xff0c;比如&#xff1a; 无法检测数组和对象的新增&#xff1b; 无法检测通过索引改变数组的操作&#xff1b; 针对以上问题&#xff0c;我们一般都会把锅甩给 Object.defineProperty。所以&#xff0c;在Vue 3.0 中&am…

每天一个数据分析题(三百九十一)- 多元线性回归

在多元线性回归模型中自变量的系数矩阵X为列满秩&#xff0c;则表明矩阵X的列向量之间是什么关系&#xff1f; A. 线性相关 B. 存在多重共线性 C. 线性无关 D. 无法判断 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项…

No module named ‘cStringIO‘

No module named cStringIO 解决方法&#xff1a; import io as sio

Linux---- 防火墙

查看防火墙状态 systemctl status firewalld关闭防火墙 systemctl stop firewalld永久关闭防火墙 systemctl stop firewalld systemctl disable firewalld打开防火墙 systemctl start firewalld查看所有已开放的临时端口 firewall-cmd --list-ports查看所有永久开放的端口…

基于Java微信小程序民宿短租系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…

Mongodb地理信息数据查询

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第78篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

K8s部署一个nginx的应用

我们在mster节点上主要有两种部署应用的方式&#xff0c;一个是通过命令行的形式&#xff0c;一个是通过编写yaml文件的形式&#xff0c;类似linux中脚本一样。以下是部署nginx的例子&#xff1a; 一、通过命令行的方式 &#xff1a; 1、部署应用kubectl create deployment ngi…

IDEA中使用leetcode 刷题

目录 1.IDEA下载leetcode插件 2.侧边点开插件 3.打开网页版登录找到cookie复制 4.回到IDEA登录 5.刷题 6.共勉 1.IDEA下载leetcode插件 2.侧边点开插件 3.打开网页版登录找到cookie复制 4.回到IDEA登录 5.刷题 6.共勉 算法题来了不畏惧&#xff0c; 挑战前行是成长的舞台…

qmt量化交易策略小白学习笔记第51期【qmt编程之期货列表--国债期货合约表】

qmt编程之获取期货列表 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 期货列表 #金融期货列表 提供当前时间段内有效的金融期货合约数据&#xff08;如行情数据等&#xff09;&#xff0c;…

AI实战案例!如何运用SD完成运营设计海报?玩转Stable Diffusion必知的3大绝技

大家好我是安琪&#xff01; Satble Diffusion 给视觉设计带来了前所未有的可能性和机会&#xff0c;它为设计师提供了更多选择和工具的同时&#xff0c;也改变了设计师的角色和设计流程。然而&#xff0c;设计师与人工智能软件的协作和创新能力仍然是不可或缺的。接下来我将从…

【LinuxC语言】UDP数据收发

文章目录 前言udp流程图udp函数介绍bind函数recvfrom函数sendto函数示例代码总结前言 在计算机网络中,UDP(用户数据报协议)是一种无连接的传输层协议,它允许应用程序快速地发送短的消息或数据报。由于UDP不需要建立和断开连接,因此它的传输速度往往比其他协议更快,但它也…

EfficientNet-V2论文阅读笔记

目录 EfficientNetV2: Smaller Models and Faster Training摘要Introduction—简介Related work—相关工作EfficientNetV2 Architecture Design—高效EfficientNetV2架构设计Understanding Training Efficiency—了解训练效率Training-Aware NAS and Scaling—训练感知NAS和缩放…

1、Python编程入门:从硬件基础到解释器类型

Python是一种免费、开源、跨平台、动态、面向对象的编程语言。它以其简洁易读的语法和强大的功能而闻名&#xff0c;广泛应用于各种领域&#xff0c;如Web开发、数据分析、人工智能等。本文将介绍Python的基本概念、执行方式以及常用的Linux命令&#xff0c;帮助初学者快速入门…

DHT11

第一个传感----DHT11 通过前面的学习&#xff0c;你已经学会了控制IO口、延时函数、串口的收发。接下来&#xff0c;你就可以借助以上的知识点完成自己的第一个传感器--DHT11啦&#xff01; DHT11 数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器。应用非常广…

【ai】tx2 nx : fix pip升级警告

jetson 环境同样出现:【原创】pip3 使用报警问题在对 Ubuntu 18.04 上的 pip3 9.0.1 版本使用 pip install -U pip 的方式进行升级后,再使用 pip 就会出现一堆警告信息。这个警告信息目前不影响使用,但从警告信息来看,会在未来版本中出现失败风险。 当前系统中存在了两个不…