当前位置： 首页 > news >正文

html css输入框获得焦点、失去焦点效果

news 2025/12/14 10:36:45

input输入框获得焦点、失去焦点效果

废话shao shuo ! 直接看效果图，好吧！

效果图：

请添加图片描述

code:

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">*{margin:0;padding:0;}#box{width:200px;height:30px;border-bottom:1px solid #a8a8a8;margin:30px auto;position:relative;}#box .input{width:100%;height:100%;outline:none;border:none;font-size:16px;}#box .line{width:0px;height:2px;background:#00aeff;position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);transition:width 0.4s ease;}#box .placeh{position:absolute;left:4px;top:5px;transition:top 0.4s ease;color:#cbcbcb;}#box .placeh:hover{cursor:text;}#box .input:focus ~ .line{width:100%;}#box .input:focus ~ .placeh,#box .input:valid ~ .placeh{top:-26px;color:#00a2ff;}</style>
</head>
<body><div id="box"><input type="text" id="input" class="input" required ><span class="line"></span><label class="placeh" for="input">Enter your account</label>
</div></body>
<script>
</script>
</html>

---- 结束 ----
仅学习。

相关文章：

html css输入框获得焦点、失去焦点效果

input输入框获得焦点、失去焦点效果 废话shao shuo ! 直接看效果图&#xff0c;好吧&#xff01; 效果图&#xff1a; code: <!DOCTYPE html> <html> <head><title></title><meta charset"utf-8" /><style type"text…...

编程日记 2023/2/27 21:28:49

Spark Streaming

第1章 SparkStreaming 概述1.1 Spark Streaming 是什么Spark 流使得构建可扩展的容错流应用程序变得更加容易。**Spark Streaming 用于流式数据的处理。**Spark Streaming 支持的数据输入源很多&#xff0c;例如&#xff1a;Kafka、Flume、Twitter、ZeroMQ 和简单的 TCP 套接字…...

编程日记 2023/2/27 21:27:41

[kubernetes]-k8s通过psp限制nvidia-plugin插件的使用

导语&#xff1a; k8s通过psp限制nvidia-plugin插件的使用。刚开始接触psp 记录一下 后续投入生产测试了再完善。 通过apiserver开启psp 静态pod会自动更新 # PSP(Pod Security Policy) 在默认情况下并不会开启。通过将PodSecurityPolicy关键词添加到 --enbale-admission-plu…...

编程日记 2023/2/27 21:26:35

简单易懂又非常牛逼的Spring源码解析，推断构造与bean的实例化

简单易懂又非常牛逼的Spring源码解析&#xff0c;推断构造与bean的实例化原理解析实例化bean的入口工厂方法实例化推断构造初次筛选二次筛选bean的实例化代码走读实例化bean的入口createBeanInstance方法内部的流程推断构造初次筛选二次筛选bean的实例化总结往期文章&#xff1…...

编程日记 2023/2/27 21:25:30

Win11的两个实用技巧系列清理磁盘碎片、设置系统还原点的方法

Win11如何清理磁盘碎片?Win11清理磁盘碎片的方法磁盘碎片过多&#xff0c;会影响电脑的运行速度&#xff0c;所以需要定期清理&#xff0c;这篇文章将以Win11为例&#xff0c;给大家分享的整理磁盘碎片方法相信很多用户都会发现&#xff0c;随着电脑使用时间的增加&#xff0c…...

编程日记 2023/2/27 21:24:23

嵌入式 STM32 红外遥控

目录 红外遥控 NEC码的位定义 硬件设计 软件设计 源码程序 红外遥控 红外遥控是一种无线、非接触控制技术&#xff0c;具有抗干扰能力强&#xff0c;信息传输可靠&#xff0c;功耗低&#xff0c;成本低&#xff0c;容易实现等显著的特点&#xff0c;被诸多电子设备特别…...

编程日记 2023/2/27 21:23:16

【java web篇】使用JDBC操作数据库

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...

编程日记 2023/2/27 21:22:08

华为OD机试题，用 Java 解【最小步骤数】问题

最近更新的博客 华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路 【2023】使…...

编程日记 2023/2/27 21:21:03

JAVA中 throw 和 throws 的区别含案例

JAVA中 throw 和 throws 的区别含案例 在 Java 中&#xff0c;throw 和 throws 是两个关键字&#xff0c;它们用于处理异常。 throw 关键字用于抛出一个异常对象。一旦抛出异常&#xff0c;程序将停止执行当前方法的剩余代码&#xff0c;并尝试寻找与该异常匹配的 catch 块来…...

编程日记 2023/2/27 21:19:56

基于SpringCloud的可靠消息最终一致性05：保存并发送事务消息

在有了分布式事务的解决方案、项目的需求、骨架代码和基础代码，做好了所有的准备工作之后，接下来就可以继续深入了解「核心业务」了。 在前面了解分布式事务时，可靠消息最终一致性方案的流程图是这样的： 图三十一：可靠消息最终一致性 整个的流程是： 1、业务处理服务在事务…...

编程日记 2023/2/27 21:18:51

SQL语句大全（详解）

SQL前言1 DDL1.1 显示所包含的数据库1.2 创建数据库1.3 删除数据库1.4 使用数据库1.4.1 创建表1.4.2 查看表的结构1.4.3 查看当前数据库下的所有表1.4.4 基础的增删改查1.4.4.1 删除表1.4.4.2 添加列1.4.4.3 修改表名1.4.4.4 修改数据类型1.4.4.5 修改列名和数据类型2 DML2.1 给…...

编程日记 2023/2/27 21:17:43

视频营销活动中7个常见的错误

如今&#xff0c;越来越多的企业在社交媒体平台上开展视频营销活动。与其他传统营销策略不同&#xff0c;视频营销可以为企业带来更多的销售机会。随着越来越多的视频社交媒体平台的出现&#xff0c;营销人员更应该抓住这个机会。但在开始视频创作之前&#xff0c;您需要有一个…...

编程日记 2023/2/27 21:16:32

MapReduce小试牛刀

部署完hadoop单机版后&#xff0c;试下mapreduce是怎么分析处理数据的 Word Count Word Count 就是"词语统计"&#xff0c;这是 MapReduce 工作程序中最经典的一种。它的主要任务是对一个文本文件中的词语作归纳统计&#xff0c;统计出每个出现过的词语一共出现的次…...

编程日记 2023/2/27 21:15:23

2023年全国最新工会考试精选真题及答案7

百分百题库提供工会考试试题、工会考试预测题、工会考试真题、工会证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 21.会员大会或会员代表大会与职工代表大会或职工大会须分别行使职权&#xff0c;&#xff08;&#xff09;…...

编程日记 2023/2/27 21:14:15

13-mvc框架原理与实现方式

1、mvc原理 # mvc 与框架## 1.mvc 是什么1. m:model,模型(即数据来源),主要是针对数据库操作 2. v:view,视图,html 页面。视图由一个一个模板构成(模板是视图的一个具体展现或载体,视图是模板的一个抽象) 3. c:controller,控制器,用于mv之间的数据交互## 2.最简单的 mvc 就是一…...

编程日记 2023/2/27 21:13:03

弹性盒子布局

目录一、弹性盒子属性二、认识flex的坐标轴三、简单学习父级盒子属性三、属性说明3.1、flex-grow一、弹性盒子属性 说明&#xff1a; div的默认样式&#xff1a;display:block 块盒子 display:flex弹性盒子&#xff08;可以控制下级盒子的位置&#xff09; 当两种盒子单独出现…...

编程日记 2023/2/27 21:11:53

C# Sqlite数据库加密

sqlite官方的数据库加密是收费的&#xff0c;而且比较贵。 幸亏微软提供了一种免费的方法。 1 sqlite加密demo 这里我做了一个小的demo演示如下&#xff1a; 在界面中拖入数据库名、密码、以及保存的路径 比如我选择保存路径桌面的sqlite目录&#xff0c;数据库名guigutool…...

编程日记 2023/2/27 21:10:44

高压放大器在声波谐振电小天线收发测试系统中的应用

实验名称&#xff1a;高压放大器在声波谐振电小天线收发测试系统中的应用研究方向&#xff1a;信号传输测试目的&#xff1a;声波谐振电小天线颠覆了传统电小天线以电磁波谐振作为理论基础的天线发射和接收模式&#xff0c;它借助声波谐振实现电磁信号的辐射或接收。因为同频的…...

编程日记 2023/2/27 21:09:35

锁相环的组成和原理及应用

一.锁相环的基本组成 许多电子设备要正常工作&#xff0c;通常需要外部的输入信号与内部的振荡信号同步&#xff0c;利用锁相环路就可以实现这个目的。 锁相环路是一种反馈控制电路&#xff0c;简称锁相环(PLL)。锁相环的特点是&#xff1a;利用外部输入的参考信号控制环路内…...

编程日记 2023/2/27 21:08:25

[C++]string类模拟实现

目录 前言&#xff1a; 1. string框架构造 2. 默认函数 2.1 构造函数 2.2 析构函数 2.3 拷贝构造 2.4 赋值重载 3. 迭代器 4. 整体程序 前言&#xff1a; 本篇文章模拟实现了C中string的部分功能&#xff0c;有助于大家了解和熟悉string类&#xff0c;虽然这个类不难实…...

编程日记 2023/2/27 21:07:17

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/12/12 20:26:10

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/13 23:14:16

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/12/9 1:31:11

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/12/9 1:42:55

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/12/4 3:48:38

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/8/24 18:47:31

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

编程新知 2025/12/5 8:15:36