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

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

news 2026/2/7 20:26:32

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

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/5 21:53:01

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

循环冗余码校验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…...

编程新知 2026/1/26 19:25:32

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/30 17:24:20

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2026/1/28 9:44:45

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/1/28 8:48:34

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19