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

有趣的CSS - 输入框选中交互动效

news 2026/4/1 23:00:13

页面效果

此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。

此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html代码

<label><input type="text" required><span>用户名</span>
</label>

页面主要使用 label 与 input 标签，注意 input 中使用 required 属性，来判断 input 是否为空。

css代码

label{width: 240px;position: relative;display: flex;align-items: center;
}
input{width: 240px;height: 32px;line-height: 32px;padding: 0 10px;border: 2px solid transparent;border-bottom-color: #333;background-color: transparent;box-sizing: border-box;transition: all 0.3s;font-size: 14px;color: #333;
}
span{position: absolute;font-size: 14px;color: #999;left: 10px;cursor: text;z-index: 1;transition: all 0.3s;
}
label:hover input,input:focus{border-color: blue;border-radius: 8px;
}
input:focus+span,input:valid+span{transform: translateY(-32px);
}

使用选择器 :hover 、:foucus 来获取鼠标状态，根据不同鼠标的不同状态来设置样式以及过渡效果，使用 :valid 来验证 input 值。

完整代码

html页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>输入框选中交互动效</title></head><body><div class="app"><label><input type="text" required><span>用户名</span></label></div></body>
</html>

css样式

.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;
}
input{list-style: none;outline-style: none;
}
label{width: 240px;position: relative;display: flex;align-items: center;
}
input{width: 240px;height: 32px;line-height: 32px;padding: 0 10px;border: 2px solid transparent;border-bottom-color: #333;background-color: transparent;box-sizing: border-box;transition: all 0.3s;font-size: 14px;color: #333;
}
span{position: absolute;font-size: 14px;color: #999;left: 10px;cursor: text;z-index: 1;transition: all 0.3s;
}
label:hover input,input:focus{border-color: blue;border-radius: 8px;
}
input:focus+span,input:valid+span{transform: translateY(-32px);
}

页面效果

以上就是全部代码以及简单的写法思路，希望你喜欢这个交互输入框。

[1] 原文阅读

我是 Just，这里是「设计师工作日常」，求点赞求关注！！！

相关文章：

有趣的CSS - 输入框选中交互动效

页面效果 此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。 此效果可适用于登录页入口、小表单提交等页面&#xff0c;增强用户实时交互体验。 核心代码部分&#xff0c;简要说明了写法思路&#xff1b;完整代码在最后&#xff0c;可直…...

编程日记 2024/2/3 8:50:44

Unknown custom element:＜xxx＞-did you register the component correctly解决方案

如图所示控制台发现了爆红&#xff08;大哭&#xff09;&#xff1a; 报错解释&#xff1a; 当我们看到报错时&#xff0c;我们需要看到一些关键词&#xff0c;比如显眼的“component”和“name”这两个单词&#xff0c; 因此我们就从此处切入&#xff0c;大概与组件有关系。…...

编程日记 2024/2/3 8:49:43

计算机网络自顶向下Wireshark labs-HTTP

我直接翻译并在题目下面直接下我的答案了。 1.基本HTTP GET/response交互 我们开始探索HTTP&#xff0c;方法是下载一个非常简单的HTML文件 非常短&#xff0c;并且不包含嵌入的对象。执行以下操作&#xff1a; 启动您的浏览器。启动Wireshark数据包嗅探器&#xff0c;如Wir…...

编程日记 2024/2/3 8:47:41

解决pandas写入excel时的ValueError: All strings must be XML compatible报错

报错内容&#xff1a; ValueError: All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control characters 报错背景 用pands批量写入excel文件&#xff0c;发生编码报错。检索了很多方案&#xff0c;都不能解决。 导致报错的原因是存在违法字符&…...

编程日记 2024/2/3 8:46:40

华为手表应用APP开发：watch系列 GT系列 1.配置调试设备

表开发：GT3（1）配置调试设备 初环境与设备获取手表UUID登录 AppGallery Connect 点击用户与访问初 希望能写一些简单的教程和案例分享给需要的人 鸿蒙可穿戴开发 支持外包开发：xkk9866@yeah.net 环境与设备 系统：window 设备：HUAWEI WATCH 3 Pro 开发工具：DevEco St…...

编程日记 2024/2/3 8:39:34

Vue（十九）：ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能

效果 原理分析 从后端获取数据后，判断当前节点是否勾选，从而判断是否勾选子节点勾选当前节点时，子节点均勾选全勾选与半勾选与不勾选的样式处理全勾选和全取消勾选的逻辑筛选出半勾选的节点定义变量 import {computed, nextTick, reactive, ref} from vue; import {tree} f…...

编程日记 2024/2/3 8:37:31

SpringBoot RestTemplate 设置挡板

项目结构 代码 BaffleConfig /*** Description 记录配置信息* Author wjx* Date 2024/2/1 14:47**/ public interface BaffleConfig {// 是否开启挡板的开关public static boolean SWITCH true;// 文件根目录public static String ROOT_PATH "D:\\TIS\\mock";// …...

编程日记 2024/2/3 8:36:30

arcgis javascript api4.x加载非公开或者私有的arcgis地图服务

需求&#xff1a; 加载arcgis没有公开或者私有的地图服务&#xff0c;同时还想实现加载时不弹出登录窗口 提示&#xff1a;​ 下述是针对独立的arcgis server&#xff0c;没有portal的应用场景&#xff1b; 如果有portal可以参考链接&#xff1a;https://mp.weixin.qq.com/s/W…...

编程日记 2024/2/3 8:33:27

2024年美赛数学建模A题思路分析 - 资源可用性和性别比例

# 1 赛题 问题A&#xff1a;资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外&#xff0c;但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1&#xff1a;1&#xff0c;但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。…...

编程日记 2024/2/3 8:32:25

UDP和TCP的区别和联系

传输层&#xff1a;定义传输数据的协议端口号&#xff0c;以及流控和差错校验。 协议有&#xff1a;TCP、UDP等 UDP和TCP的主要区别包括以下几个方面&#xff1a; 1、连接性与无连接性&#xff1a;TCP是面向连接的传输控制协议&#xff0c;而UDP提供无连接的数据报服务。这意…...

编程日记 2024/2/3 8:25:19

delete、truncate和drop区别

一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言&#xff0c;只删除数据不删除表的结构&#xff0c;会走事务&#xff0c;执行时会触发trigger&#xff08; 触发器…...

编程日记 2024/2/3 8:21:16

946. 验证栈序列

946. 验证栈序列 描述 : 给定 pushed 和 popped 两个序列&#xff0c;每个序列中的 值都不重复&#xff0c;只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时&#xff0c;返回 true&#xff1b;否则&#xff0c;返回 false 。 题目 : LeetCode 94…...

编程日记 2024/2/3 8:17:11

Linux系统管理和Shell脚本笔试题

1、写一个sed命令&#xff0c;修改/tmp/input.txt文件的内容&#xff0c;要求&#xff1a;(1) 删除所有空行&#xff1b;(2) 在非空行前面加一个"AAA"&#xff0c;在行尾加一个"BBB"&#xff0c;即将内容为11111的一行改为&#xff1a;AAA11111BBB #写入内…...

编程日记 2024/2/3 8:16:10

docker 搭建 Seafile 集成 onlyoffice

docker-compose一键部署yaml文件 version: "3"services:db:image: mariadb:10.11container_name: seafile-mysqlenvironment:- MYSQL_ROOT_PASSWORDdb_dev # Requested, set the roots password of MySQL service.- MYSQL_LOG_CONSOLEtruevolumes:- /share/ZFS18_D…...

编程日记 2024/2/3 8:15:10

【Spring Boot 3】【JPA】嵌入式对象

【Spring Boot 3】【JPA】嵌入式对象 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术总是要花费或…...

编程日记 2024/2/3 8:13:08

STM32控制DS18B20温度传感器获取温度

时间记录&#xff1a;2024/1/28 一、DS18B20温度传感器介绍 &#xff08;1&#xff09;测温范围-55℃~125℃&#xff0c;在-10℃到85℃范围内误差为0.4 &#xff08;2&#xff09;返回的温度数据为16位二进制数据 &#xff08;3&#xff09;STM32和DS18B20通信使用单总线协议…...

编程日记 2024/2/3 8:12:06

服务器常遇的响应状态码

服务器常遇的响应状态码 状态码 500 表示服务器内部错误。 这种状态码意味着服务器在尝试执行请求时遇到了意外情况。在处理这种状态码时&#xff0c;我们需要联系服务器管理员或服务提供商以获取更多信息。 处理方法&#xff1a;联系服务器管理员或服务提供商以获取更多信息…...

编程日记 2024/2/3 8:10:04

云原生业务全流程DevOps配置预研与实践

背景 我在一个二线城市&#xff08;山东济南&#xff09;&#xff0c;相对与北上广深杭这些IT业发达的城市来说&#xff0c;济南IT业对于业内新技术的接受度是有点慢的&#xff0c;国内很多一线大厂早先几年前就开始实践使用的技术&#xff0c;我们这边也是近两年才开始慢慢兴…...

编程日记 2024/2/3 8:07:00

SouthLeetCode-打卡24年01月第5周

SouthLeetCode-打卡24年01月第5周 // Date : 2024/01/39 ~ 2024/01/31 031.删除链表的倒数第 N 个结点 (1) 题目描述 031#LeetCode.19.#北岸计划2024/01/29 (2) 题解代码 Version1.0 class Solution {public ListNode removeNthFromEnd(ListNode head, int n) {if(head …...

编程日记 2024/2/3 8:05:58

【国产MCU】-CH32V307-通用DMA控制器及使用

通用DMA控制器及使用 文章目录 通用DMA控制器及使用1、通用DMA控制器介绍2、DMA驱动API介绍3、DMA使用实例直接存储器访问控制器（DMA）提供在外设和存储器之间或存储器和存储器之间的高速数据传输方式，无须CPU 干预，数据可以通过DMA 快速地移动，以节省CPU 的资源来做其他操…...

编程日记 2024/2/3 8:03:56

多场景适配：ClearerVoice-Studio支持16K/48K采样率，会议直播都适用

多场景适配&#xff1a;ClearerVoice-Studio支持16K/48K采样率&#xff0c;会议直播都适用 1. 为什么音频采样率如此重要&#xff1f; 在语音处理领域&#xff0c;采样率选择直接影响最终效果。就像相机像素决定照片清晰度一样&#xff0c;音频采样率决定了声音的"分辨率…...

编程新知 2026/4/1 22:43:32

GLM-OCR完整教程：部署、使用、API、案例，一篇搞定所有

GLM-OCR完整教程&#xff1a;部署、使用、API、案例&#xff0c;一篇搞定所有 1. GLM-OCR简介与核心优势 GLM-OCR是一款基于先进多模态架构的OCR识别工具&#xff0c;专为解决复杂文档理解问题而设计。与市面上大多数OCR工具不同&#xff0c;它不仅能识别文字&#xff0c;还能…...

编程新知 2026/4/1 22:00:53

掌握5个核心配置技巧：OpenCore-Configurator从入门到专家

掌握5个核心配置技巧&#xff1a;OpenCore-Configurator从入门到专家 【免费下载链接】OpenCore-Configurator A configurator for the OpenCore Bootloader 项目地址: https://gitcode.com/gh_mirrors/op/OpenCore-Configurator OpenCore-Configurator&#xff08;简称…...

编程新知 2026/4/1 20:52:04

CSS 滚动驱动动画：让页面动起来的新维度

CSS 滚动驱动动画&#xff1a;让页面动起来的新维度代码如诗&#xff0c;滚动如歌。让我们用滚动驱动动画的魔法&#xff0c;为用户带来沉浸式的浏览体验。什么是滚动驱动动画&#xff1f; 滚动驱动动画&#xff08;Scroll-driven Animations&#xff09;是 CSS 中一项革命性的…...

编程新知 2026/4/1 20:35:58

PvZ Toolkit：植物大战僵尸PC版终极修改器使用指南

PvZ Toolkit&#xff1a;植物大战僵尸PC版终极修改器使用指南 【免费下载链接】pvztoolkit 植物大战僵尸 PC 版综合修改器 项目地址: https://gitcode.com/gh_mirrors/pv/pvztoolkit 还在为植物大战僵尸中资源不足而烦恼吗&#xff1f;PvZ Toolkit是一款专为植物大战僵尸…...

编程新知 2026/4/1 19:09:01

表贴式PMSM超前角弱磁控制策略：弱磁id=0控制速度提升研究，从2000rpm到4000rp...

该模型实现表贴式PMSM的超前角弱磁控制策略 不打开弱磁id0控制速度只能达到2000rpm&#xff0c;打开能够弱磁到4000rpm在调试表贴式永磁同步电机&#xff08;PMSM&#xff09;时&#xff0c;发现一个有趣的现象&#xff1a;当保持id0的传统控制策略时&#xff0c;电机转速死活卡…...

编程新知 2026/4/1 18:50:53

我的杭州亲子旅游线路总结（坐船版）

我的杭州亲子旅游线路总结&#xff08;坐船版&#xff09; 这是我带娃走过的线路。孩子最近迷恋坐船&#xff0c;我看到新闻说梅花碑有公交船&#xff0c;而且梅花开了很漂亮&#xff0c;就去看看。 这里记录一下行程&#xff0c;说不定以后还去&#xff0c;能做参考。 文中提及…...

编程新知 2026/4/1 18:18:58

大模型风口已至！普通人如何逆袭拿高薪？学员真实案例告诉你答案！

在人工智能飞速发展的今天&#xff0c;大模型已成为科技行业的核心赛道&#xff0c;无数人渴望抓住这波风口实现职业跃迁。而我们的大模型学员&#xff0c;用一份份亮眼的 offer&#xff0c;交出了完美答卷&#xff01; &#x1f31f; 平凡起点&#xff0c;非凡逆袭 他们中有**…...

编程新知 2026/4/1 17:05:43

CentOS7下KingbaseES V9与MySQL性能对比实测：从安装到查询优化的全流程体验

CentOS7下KingbaseES V9与MySQL性能对比实测&#xff1a;从安装到查询优化的全流程体验 在国产数据库技术快速发展的今天&#xff0c;越来越多的企业开始关注从传统数据库向国产化解决方案的迁移。作为国产数据库中的佼佼者&#xff0c;KingbaseES V9凭借其出色的MySQL兼容性和…...

编程新知 2026/4/1 17:01:27

深圳嵌入式技术产业创新与应用全景

1. 深圳嵌入式科技产业全景扫描 深圳作为中国科技创新高地&#xff0c;已形成全球最完整的嵌入式技术产业链。从消费电子到工业控制&#xff0c;从汽车电子到医疗设备&#xff0c;嵌入式系统正以"润物细无声"的方式重塑各个行业。这座城市聚集了超过2000家嵌入式相关…...

编程新知 2026/4/1 16:36:56