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

input 获取焦点后样式的修改

一、实现目标
1.没有获取焦点时样子
默认显示
2.获取焦点时
在这里插入图片描述
代码:

<input  class="input"placeholder="请输入关键字" @input="loadNode"
/>

css

.input {border-radius: 14px;border:1px solid #e4e4e4;margin: 5px;margin-top: 10px;width: 95%;height: 28px;font-size: 12px;font-weight: normal;color: #333333;font-family: '微软雅黑';}
/* 修改input占位符样式 */
.input::placeholder {padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* WebKit, Blink, Edge浏览器,带input,双冒号 */
.input::-webkit-input-placeholder{ padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* 火狐浏览器高版本(19+),不用带input,双冒号 */
.input::-moz-placeholder{ padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* 火狐浏览器底版本(4 to 18),不用带input,单冒号 */
.input:-moz-placeholder{ padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* IE浏览器底版本(10-11),带input,单冒号 */
.input:-ms-input-placeholder{  padding-left: 5px;box-sizing: border-box;color: #CCCCCC;
}
/* 修改input获取焦点后的样式 */
.input:focus{box-shadow: 0px 0px 5px 0px rgba(64, 159, 255,0.25);border:none;outline:1px solid #409EFF
}
/* 修改input获取焦点后占位符消失 */
.input:focus::-webkit-input-placeholder{color:transparent;
}

相关文章:

input 获取焦点后样式的修改

一、实现目标 1.没有获取焦点时样子 2.获取焦点时 代码&#xff1a; <input class"input"placeholder"请输入关键字" input"loadNode" />css .input {border-radius: 14px;border:1px solid #e4e4e4;margin: 5px;margin-top: 10px;wi…...

持续集成交付CICD:Jenkins使用GitLab共享库实现自动上传前后端项目Nexus制品

目录 一、实验 1.GitLab本地导入前后端项目 2.Jenkins新建前后端项目流水线 3.Sonarqube录入质量阈与质量配置 4.修改GitLab共享库代码 5.Jenkins手动构建前后端项目流水线 6.Nexus查看制品上传情况 7.优化代码获取RELEASE分支 8.优化Jenkins流水线项目名称 一、实验 …...

50mA、24V、超低 IQ、低压降稳压器

一、Description The TPS715 low-dropout (LDO) voltage regulators offer the benefits of high input voltage, low-dropout voltage, low-power operation, and miniaturized packaging. The devices, which operate over an input range of 2.5 V to 24 V, are stable wit…...

【Python测试开发】文件上传操作

先写一个上传页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>文件上传</title><link href"http://dcn.bootcss/bootstrap/3.3.0/css/bootstrap.min.css" rel"styleshee…...

深兰科技AI医疗健康产品获3000台采购订单

12月6日&#xff0c;武汉某企业与深兰科技签署协议&#xff0c;一次性采购3,000台深兰科技AI生理健康检测仪——扁鹊。 深兰科技AI生理健康检测仪——扁鹊是深兰科技推出的人体生理指标检测产品。基于AI生物技术、融合互联网医疗及AIoT技术&#xff0c;深兰科技AI生理健康检测仪…...

金鸣表格文字识别的图片转word,模块不同,效果有何差异?

金鸣表格文字识别系统可以将图片等格式的文件转为word&#xff0c;而且有好几种输出word的方式&#xff0c;那么&#xff0c;它们都有什么区别呢&#xff1f; 一、表格识别模块输出的word。可以输出文本和表格混合格式的word&#xff0c;比较适合有表格样式的图片转换识别&…...

Qt Creator设置IDE的字体、颜色、主题样式

Qt是一款开源的、跨平台的C开发框架&#xff0c;支持Windows、Linux、Mac系统&#xff0c;从1995发布第一版以来&#xff0c;发展迅猛&#xff0c;最开始是用于Nokia手机的Symbian(塞班)系统和应用程序开发&#xff0c;现在是用于嵌入式软件、桌面软件(比如WPS、VirtualBox)、A…...

SpringBootWeb入门、HTTP协议、Web服务器-Tomcat

目录 一、SpringBootWeb入门 二、HTTP协议 HTTP-请求协议 HTTP-响应协议 HTTP-协议解析 三、Web服务器-Tomcat 服务器概述 Tomcat 一、SpringBootWeb入门 直接基于SpringFramework进行开发&#xff0c;存在两个问题&#xff1a;配置繁琐、入门难度大 通过springboot就…...

【Jenkins】Centos环境安装Jenkins(通过rpm安装)

在Centos操作系统中通过rpm安装Jenkins 参考官网 https://www.jenkins.io/doc/book/installing/linux/#red-hat-centos 1、下载安装Jdk17 下载安装 # 更新您的系统&#xff0c;不一定需要 # sudo yum -y update # 安装将用于下载 Java 17 二进制文件的 wget 命令行工具。 s…...

华为数通---配置基本QinQ示例

QinQ简介 定义 QinQ&#xff08;802.1Q-in-802.1Q&#xff09;技术是一项扩展VLAN空间的技术&#xff0c;通过在802.1Q标签报文的基础上再增加一层802.1Q的Tag来达到扩展VLAN空间的功能&#xff0c;可以使私网VLAN透传公网。由于在骨干网中传递的报文有两层802.1Q Tag&#x…...

利用poi实现将数据库表字段信息导出到word中

研发文档对于开发人员来说都不陌生了&#xff0c;而研发文档里重要的一部分就是表结构设计&#xff0c;需要我们在word建个表格把我们数据库中的表字段信息填进去&#xff0c;表多的话靠我们手动去填非常累人&#xff01;&#xff01;&#xff01; 因此作为开发人员可不可以写…...

深入浅出分析kafka客户端程序设计 ----- 生产者篇----万字总结

前面在深入理解kafka中提到的只是理论上的设计原理&#xff0c; 本篇讲得是基于c语言的kafka库的程序编写&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 首先要编写生产者的代码&#xff0c;得先知道生产者的逻辑在代码上是怎么体现的 1.kafka生产者的逻辑 …...

粗到细语义(Coarse-to-Fine Semantics)

粗到细语义&#xff08;Coarse-to-Fine Semantics&#xff09;是一种深度学习模型的设计方法&#xff0c;它通过逐步细化的方式来理解文本中的语义信息。这种方法通常用于文本分类、情感分析、问答等任务中。 在粗到细语义中&#xff0c;模型首先从整体上理解文本的大致意思&a…...

小程序开发实战案例四 | 小程序标题栏如何设置

上一期我们了解了 小程序底部导航栏 的实现效果&#xff0c;今天一起来了解下如何设置小程序标题栏&#xff5e; 基础标题栏 小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块&#xff0c;其中能够调整的部分只有标题和背景色。 另外 IDE上无法展示收藏按钮&#…...

Flutter在Visual Studio Code上首次创建运行应用

一、创建Flutter应用 1、前提条件 安装Visual Studio Code并配置好运行环境 2、开始创建Flutter应用 1)、打开Visual Studio Code 2)、打开 View > Command Palette。 3)、在搜索框中输入“flutter”&#xff0c;弹出内容如下图所示&#xff0c;选择“ Flutter: New Pr…...

如何用ChatGPT分析恶意软件?

自从我们进入数字化时代以来&#xff0c;恶意软件就一直是计算机应用系统的“心腹大患”。事实上&#xff0c;每一次技术进步都会为恶意行为者提供更多的工具&#xff0c;使得他们的攻击行为更具破坏性。不过&#xff0c;如今生成式人工智能的崛起&#xff0c;似乎让一直以来的…...

【Axure高保真原型】能增删改的树形表格

今天和大家分享能增删改的树形表格的原型模板&#xff0c;包括展开、折叠、增加、修改、删除表格内容&#xff0c;那这个原型模板是通过中继器制作的&#xff0c;所以使用简单&#xff0c;只需要填写中继器表格&#xff0c;即可自动生成对应的树形表格。这个模板最高支持6级树形…...

前端打包工具之Webpack5

前端打包工具之Webpack5 什么是打包工具打包工具的作用常见的打包工具一、Webpack1、什么是[webpack](https://webpack.docschina.org/concepts/)2、webpack本身的功能是有限的3、webpack基本使用&#xff1a;基于本身功能只解析JS资源4、webpack配置4.1、entry&#xff08;入口…...

linux设置环境变量

linux设置环境变量 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; Linux设置环境变量&#xff1a;打造个性化开发环境 在Linux系统中&#xff0c;环境变量是一项…...

vue中对pdf文件和路径的处理

根据url预览pdf文件 地址栏输入url可以直接预览的pdf&#xff0c;这种我们可以直接使用vue-pdf进行预览 <div class"animation-box-pdf"><pdf :src"url" /></div><script> import Pdf from vue-pdfexport default {components: …...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...