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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

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

『PyTorch』张量和函数之gather()函数

文章目录 PyTorch中的选择函数gather()函数 参考文献 PyTorch中的选择函数 gather()函数 import torch a torch.arange(1, 16).reshape(5, 3) """ result: a [[1, 2, 3],[4, 5, 6],[7, 8, 9],[10, 11, 12],[13, 14, 15]] """# 定义两个index…

Linux的基本指令和权限的知识

学前的建议&#xff1a;大家不要太关注指令是啥&#xff0c;记不住怎么办&#xff08;没事&#xff0c;想用时去查就好了&#xff09;&#xff0c;这篇文章重点部分是围绕指令的周边知识。毕竟指令是“死肌肉”&#xff0c;而一些关于Linux和操作系统的理论知识才是最重要滴&am…

ARM SMMU简介

ARM SMMU&#xff08;System Memory Management Unit&#xff09;主要用于提供外设的DMA请求的内存管理和地址转换功能。它主要处理虚拟地址与物理地址之间的映射关系&#xff0c;将外设的物理地址映射到系统的虚拟地址空间。在这个过程中&#xff0c;SMMU会根据配置的映射表将…

认识loader和plugin

在 webpack 中&#xff0c;专注于处理 webpack 在编译过程中的某个特定的任务的功能模块&#xff0c;可以称为插件。它和 loader 有以下区别&#xff1a; 1loader 是一个转换器&#xff0c;将 A 文件进行编译成 B 文件&#xff0c;比如&#xff1a;将 A.less 转换为 A.css&…

webpack学习-4.开发环境

webpack学习-4.开发环境 1.mode2.使用source map3.自动编译代码3.1 webpack 的 观察模式3.2 使用 webpack-dev-server3.3 使用 webpack-dev-middleware 4.总结 1.mode 本章的标题一看就是开发环境&#xff0c;那就要引入webpack配置文件的mode了。 mode 属性用于指定 Webpack …

`/etc/gitlab/gitlab-secrets.json`文件丢失时Gitlab恢复办法

当/etc/gitlab/gitlab-secrets.json文件丢失时 如果您没有备份secrets文件&#xff0c;则必须完成几个步骤才能使GitLab重新正常工作。 secrets文件负责存储包含必需的敏感信息的列的加密密钥。如果密钥丢失&#xff0c;GitLab将无法解密这些列&#xff0c;从而阻止对以下项目…

052:vue重新发布,软件热更新方面的一点经验示例

第052个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

Github 2023-12-13 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2023-12-13统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量非开发语言项目5Python项目2TypeScript项目1Jupyter Notebook项目1JavaScript项目1PHP项目1 从零开始构建技术…

Unity中Shader URP的安装与设置

文章目录 前言一、URP安装1、Window -> Project Manager -> 搜索 Render 二、URP设置1、创建一个URP配置文件2、渲染管线的修改&#xff08;当为空时&#xff0c;使用的是 BuildIn Render Pipeline&#xff09;3、这时我们新建一个对象。使用的材质球默认使用 URP 默认Sh…

uni-app点击预览图片

<image :src"info.shopLogoUrl" tap"_previewImage(info.shopLogoUrl)" mode"widthFix" >_previewImage(image) {var imgArr [];imgArr.push(image);//预览图片uni.previewImage({urls: imgArr,current: imgArr[0]});},大佬地址

关于特效制作的小讨论

大家好&#xff0c;我是阿赵。   我的工作一直都比较忙&#xff0c;在一个只有几十人的游戏工作室里面&#xff0c;要同时进行多个项目的开发。但在这么忙碌的工作中&#xff0c;工作室居然几乎没有自己的美术团队&#xff0c;而是和公司的其他工作室共用一个美术团队&#x…

搞定ESD(七):静电放电问题典型案例分析(二)

文章目录 一、环境温度控制器接触放电15KV测试出现黑屏等问题案例分析1. 问题现象描述2. 问题现象分析3. 问题分析验证过程3.1 根据温度金属探头连接图,尝试从如下试验协助判断静电干扰路径:3.2 初步判定为静电放电电流磁场辐射,根据磁场耦合的机理,需要分析寻找到系统内部…

【LeetCode每日一题】53. 最大子数组和

https://leetcode.cn/problems/maximum-subarray/description/ 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 方式一&#xff1a;暴力…

MySQL基础笔记

MySQL 1. SQL1.1 SQL-DDL语句1.1.1 数据库操作1.1.2 表操作 1.2 MySQL-DML语句1.3 MySQL-DQL语句1.3.1 基本查询1.3.2 条件查询1.3.3 聚合函数1.3.4 分组查询1.3.5 排序查询1.3.6 分页查询 1.4 MySQL-DCL语句1.4.1 管理用户1.4.2 权限控制 2. 函数2.1 字符串函数2.2 数值函数2.…

结构体与位段

1.位段的声明与结构体是类似的&#xff0c;但位段的成员必须是int,unsigned int或者sighed int&#xff0c;但在c99环境中无此限制 2.位段的成员后面有一个冒号和一个数字&#xff0c;数字代表成员占有的比特位 struct A {int_a:3;unsigned int_b:4;signed int_c:5;}; //位段…

数据标注公司如何确保数据安全?景联文科技多维度提供保障

数据标注公司通常拥有大量的AI数据和用户数据&#xff0c;保护数据安全是数据标注公司的重要任务。 数据标注公司确保标注数据的安全可以从制度、人员、工具等多个方面入手&#xff0c;建立完善的安全管理体系和审计机制&#xff0c;加强应急预案和备份机制的建立&#xff0c;以…

交流220V转降直流5V0.5A非隔离BUCK降压电源芯片 家电控制板MCU

交流220V转降直流5V0.5A非隔离BUCK降压电源芯片 在家电控制板MCU中&#xff0c;为了提供稳定可靠的电源供应&#xff0c;需要一个能够将交流220V的电压转换为降压后的直流5V电压的电源芯片。本文将介绍一款非隔离BUCK降压电源芯片&#xff0c;它能够满足这一需求。 AH8699-22…

华为云之轻松搭建 Nginx 静态网站

华为云之轻松搭建 Nginx 静态网站 一、本次实践介绍1. 本次实践目的2. 本次实践环境 二、ECS弹性云服务器介绍三、准备实践环境1. 预置环境2. 查看ECS服务器的账号密码信息3. 登录华为云4. 远程登录ECS服务器 四、安装配置 Nginx1. 安装nginx2. 启动nginx3. 浏览器中访问nginx服…

【INTEL(ALTERA)】Agilex7 FPGA Development Kit DK-DK-DEV-AGI027RBES 编程/烧录/烧写/下载步骤

DK-DEV-AGI027RBES 的编程步骤&#xff1a; 将 USB 电缆插入 USB 端口 J8&#xff08;使用 J10 时&#xff0c;DIPSWITCH SW5.3&#xff08;DK-DEV-AGI027RES 和 DK-DEV-AGI027R1BES&#xff09;和 SW8.3&#xff08;DK-DEV-AGI027RB 和 DK-DEV-AGI027-RA&#xff09;应关闭&a…