html+css绘制自定义样式输入框

效果:
在这里插入图片描述
在这里插入图片描述
代码:

html部分:

<div class="box">
<div class="newbox">
            <input type="text" required>
            <div class="name">Username</div>
        </div>
</div>

css部分

body {
        background-color: rgb(1, 39, 39);
    }

    .newbox {
        color: #fff;
        position: relative;
        margin-top: 100px;
    }

    .newbox input {
        border: none;
        outline: none;
        border-bottom: 2px solid #fff;
        width: 300px;
        height: 40px;
        background-color: rgb(1, 39, 39);
        color: aqua;
    }

    .newbox div {
        position: absolute;
        top: 3px;
        transition: 0.5s;  //加上动作更丝滑
    }
//输入有效值或者获得焦点时,设置div的样式为
    .newbox input:valid~div,
    .newbox input:focus~div {
        transform: translateY(-30px);
        color: #fff;
    }
 /* 输入的值有效时,input设置样式为 */
 .newbox input:valid,
 /*获得焦点时展示input样式*/
 .newbox input:focus{
    border: 2px solid aqua;
    border-radius: 6px;
 }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

神经网络的工程基础(三)——更优化的最优化算法

相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型&#xff1a;从线性回归到通用人工智能》&#xff0c;欢迎有兴趣的读者多多支持。 本文将讨论更优化的最优化问题算法。 关于大语言模型的内容&#xff0c;推荐参考这个专栏。 内容大纲 相关说明一、概述二、算…

1103 缘分数(测试点4)

solution 测试点4&#xff1a;1 1不符合缘分数定义&#xff0c;但是这个判断能够通过记得排除掉 #include<iostream> #include<cmath> using namespace std; bool judge(int n){int t sqrt(n);if(t * t n) return true;return false; } int main(){int n, m, c…

淘宝订单系统ERP中如何接入平台订单信息?(订单API)

淘宝开放平台中有交易API&#xff0c;里面有各种关于交易的API接口。但是申报应用权限的审核流程严格又漫长。不少公司费时费力的申请后&#xff0c;结果还是没有审批下来。 调用淘宝自定义接口custom&#xff0c;可以实现淘宝开放平台API的调用。技术人员会根据您需要的接口做…

思科模拟器--03.RIP协议路由--24.5.17

1.首先&#xff0c;先创建两个个人电脑:PC0和PC1和三个路由器:R1&#xff0c;R2和R3. (诀窍:建议用文本框标注一下重要简短的内容; 目的:降低失误概率,提高成功率!) 第0步:(个人电脑的IP,子网掩码和默认网关配置) 接着&#xff0c;可以先将个人电脑的IP和网关先配置一下…

面试-软件工程与设计模式相关,Spring简介

面试-软件工程与设计模式相关&#xff0c;Spring简介 1.编程思想1.1 面向过程编程1.2 面向对象编程1.2.1 面向对象编程三大特征 1.3 面向切面编程1.3.1 原理1.3.2 大白话&#xff1f;1.3.3 名词解释1.3.4 实现 2. 耦合与内聚2.1 耦合性2.2 内聚性 3. 设计模式3.1 设计模型七大原…

7.从0做一个vue键盘组件

文章目录 1. 从0做一个键盘组件1.1. 最终效果1.2. 分析1.3. 实现1.4. 如何引用 1. 从0做一个键盘组件 首先是why的问题&#xff1a;为什么需要做键盘组件&#xff1f; 我们目前可知的场景&#xff1a; 在新增账单的时候&#xff0c;需要用到键盘在比如从账单列表页&#xff…

基于Kafka的日志采集

目录 前言 架构图 资源列表 基础环境 关闭防护墙 关闭内核安全机制 修改主机名 添加hosts映射 一、部署elasticsearch 修改limit限制 部署elasticsearch 修改配置文件 启动 二、部署filebeat 部署filebeat 添加配置文件 启动 三、部署kibana 部署kibana 修…

实现底部表情评价,聚焦改变颜色,点击坏评价自动变成好评价

如下&#xff0c;非常简单的一个小玩意。 废话不多说直接上代码&#xff1a; <!--* 轮子的作者: 轮子哥* Date: 2024-05-22 10:43:45* LastEditTime: 2024-05-24 10:28:53 --> <!DOCTYPE html> <html lang"en"><head><meta charset"…

51-指针_野指针,指针运算

51-1 野指针 51-1-1 什么是野指针 概念&#xff1a;野指针就是指针指向的位置是不可知的&#xff08;随机的、不正确的、没有明确限制的) 没有初始化 int main() {int* p;//p没有初始化&#xff0c;就意味着没有明确的指向//一个局部变量不初始化的话&#xff0c;放的是随机…

clickhouse 中的数组(array)和元组(Tuple)—— clickhouse 基础篇(二)

文章目录 数组判断是否为空计算数组长度获取数组元素判断某个元素是否存在数组切片数组元素展开数组元素去重删除连续重复元素连接多个数组数组倒序数组拍平数组元素映射数组元素过滤数组聚合分析计算数组交集计算数组并集计算数组差集SQL 子查询进行集合操作 元组创建元组获取…

八国多语言微盘微交易所系统源码 单控点控 K线完好

安装环境linux NGMySQL5.6PHP7.2&#xff08;函数全删&#xff09;pm2管理器&#xff08;node版本选择v12.20.0&#xff09; config/ database.php 修改数据库链接 设置运行目录 public 伪静态thinkphp

最有效的企业数据防泄漏手段 | 数据泄漏防护系统推荐

随意信息安全意识不断提高&#xff0c;企业纷纷寻求高效的数据防泄漏手段。在众多解决方案中&#xff0c;这五款软件各具特色&#xff0c;但它们的共同目标都是确保企业数据的安全性和保密性。 接下来&#xff0c;我们将逐一介绍这五款软件的特点和优势。 1、Ping 32 Ping32…

C中十进制转十六进制示例

uint8_t QR_code_RxBfr[255]{0}; uint8_t TouchCode[100];memcpy (&Sys.TouchCode[0], &QR_code_RxBfr[0], Sys.QR_code_Len);Str &Sys.TouchCode[TmpVble];Sys.Card_ID 0; while(0 ! isdigit(*Str)){Sys.Card_ID Sys.Card_ID*10 *Str - 0;Str;} 最后在通过以下…

【淘宝商品API接口】淘宝一件代发,如何找到便宜又靠谱的货源商品铺货到自己店铺?

电商商品API接口 对没有自己货源的淘宝小卖家来说&#xff0c;从1688等货源平台拿货做一件代发是最好的选择。不需要囤货&#xff0c;也不需要自己打包发货&#xff0c;投入小、风险低。 在大部分卖家眼里&#xff0c;1688上面的商品很贵&#xff0c;甚至比淘宝同行卖的都贵&…

Ceph集群RBD块存储:快照与Copy-on-Write克隆的基本操作

文章目录 1.RBD块存储镜像克隆概念2.copy-on-write克隆的基本使用2.1.在块存储中创建一个快照2.2.将快照配置成保护模式2.3.基于快照克隆出镜像2.4.使用克隆的镜像2.5.查看一个快照下有哪些克隆的镜像 1.RBD块存储镜像克隆概念 镜像克隆官方文档&#xff1a;https://docs.ceph…

Qt for android 添加自己的java包

java 包 目录 .pro 中添加 OTHER_FILES $$PWD/android/src/ScytheStudio \$$PWD/android/src/Serial 或 DISTFILES android/src/ScytheStudio \android/src/Serial \或(可以在Qt Creator中显示) DISTFILES android/src/ScytheStudio/*.java \android/src/Serial/*.java \

QQ沐个人引导页html源码

好看的QQ沐个人引导页html源码&#xff0c;鼠标移动滑出美丽的线条收缩特效&#xff0c;界面美观大气&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 …

【分享】3种方法取消PPT的“限制保护”

PPT如果设置了有密码的“只读方式”&#xff0c;每次打开PPT&#xff0c;都会出现对话框&#xff0c;提示需要输入密码才能修改文件&#xff0c;否则只能以“只读方式”打开。 以“只读方式”打开的PPT就会被限制&#xff0c;无法进行编辑修改等操作。那如果后续不需要“限制保…

Springboot阶段项目---《书城项目》

一 项目介绍 本项目采用集成开发平台IntelliJ IDEA开发了在线作业成绩统计系统的设计与实现&#xff0c;实现了图书商城系统的综合功能和图形界面的显示&#xff0c;可以根据每个用户登录系统后&#xff0c;动态展示书城首页图书&#xff0c;实现了分类还有分页查询&#xff0c…

MySQL -- 相关知识点

1.数据库相关介绍 数据库的选择通常取决于具体的应用需求&#xff0c;如性能、扩展性、数据一致性和易用性等因素。 1. 关系型数据库&#xff08;RDBMS&#xff09; MySQL&#xff1a; 广泛使用的开源数据库&#xff0c;支持大多数操作系统。强调易用性、灵活性和广泛的社区支…