Vue3中Element-Plus中el-input及el-select 边框样式

如果不需要显示下边框,纯无边框直接将 【border-bottom: 1px solid #C0C4CC; 】注掉或去掉即可。
正常引用组件使用即可,无须自定义样式,最终效果CSS样式。

<style scoped>
/* 输入框的样式 */
:deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-bottom: 1px solid #C0C4CC; /* 默认下边框颜色 */
}

/* 选择框的样式 */
:deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-bottom: 1px solid #C0C4CC; /* 默认下边框颜色 */
}

/* 鼠标悬停时的样式 */
:deep(.el-input__wrapper:hover) {
  border-bottom: 1px solid var(--el-color-primary); /* 鼠标悬停时下边框高亮 */
}

:deep(.el-select__wrapper:hover) {
  border-bottom: 1px solid var(--el-color-primary) !important; /* 鼠标悬停时下边框高亮 */
}

/* 聚焦时的样式 */
:deep(.el-input__wrapper:focus) {
  border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
}

:deep(.el-select__wrapper:focus) {
  border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
}
</style>

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

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

相关文章

如何做好一份技术文档:从信息孤岛到知识图谱的进阶之路

如何做好一份技术文档&#xff1a;从信息孤岛到知识图谱的进阶之路 在软件开发的漫长征程中&#xff0c;技术文档如同隐藏在代码丛林中的路标&#xff0c;不仅指引着开发团队的前行方向&#xff0c;更在产品迭代的岁月里构筑起知识传承的桥梁。一份优质的技术文档&#xff0c;既…

Docker Compose使用自定义用户名密码启动Redis

通常我们使用下面的命令来启动 redis 容器&#xff0c;此时连接 Redis 的时候是不需要用户认证的 sudo docker run -d --name my-redis -p 6379:6379 redis此时我们可以使用 redis-server --requirepass "mypassword" 来指定默认用户&#xff08;default&#xff09…

1.什么是node.js、npm、vue

一、Node.js 是什么&#xff1f; &#x1f63a; 定义&#xff1a; Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境&#xff0c;让你可以在浏览器之外运行 JavaScript 代码&#xff0c;主要用于服务端开发。 &#x1f63a;从计算机底层说&#xff1a;什么是“运…

如何在 Vue.js 中集成 Three.js —— 创建一个旋转的 3D 立方体

在这篇文章中&#xff0c;我将向大家展示如何将 Three.js 与 Vue.js 结合&#xff0c;创建一个简单的 3D 场景&#xff0c;并展示一个旋转的立方体。通过这个简单的示例&#xff0c;你将学习到如何在 Vue 项目中集成 Three.js&#xff0c;以及如何创建动态的 3D 内容。 1. 安装…

DeepSeek‑R1-0528 重磅升级:蚂蚁百宝箱免费、无限量调用

DeepSeek‑R1-0528 重磅升级&#xff1a;蚂蚁百宝箱免费、无限量调用 端午假期前一天&#xff0c;DeepSeek‑R1 更新到了 0528 版本&#xff01; 官方说明&#xff1a;0528 版本在深度思考与推理能力方面显著增强——在数学、编程与通用逻辑等多项基准测评中&#xff0c;表现已…

RS232转Profinet网关在检漏仪与西门子PLC里的应用

RS232转Profinet网关在检漏仪与西门子PLC里的应用 在工业自动化和控制领域&#xff0c;设备间的高效通信至关重要。RS232转Profinet网关作为一种关键的转换工具&#xff0c;能够将传统的RS232接口设备接入现代化的Profinet网络&#xff0c;从而实现数据的无缝传输和设备的远程…

jenkins-jenkins简介

一、简介 jenkins是一个可扩展的持续集成引擎。持续集成&#xff0c;也就是通常所说的CI&#xff08;Continues Integration&#xff09;&#xff0c;可以说是现代软件技术开发的基础。持续集成是一种软件开发实践&#xff0c; 即团队开发成员经常集成他们的工作&#xff0c;通…

vue发版html 生成打包到docker镜像进行发版

将Vue项目打包成Docker镜像部署主要分为以下几个步骤&#xff1a; 1. Vue项目打包‌ 执行npm run build生成dist文件夹&#xff0c;包含静态资源文件 注意检查index.html中资源引用路径是否正确&#xff08;避免绝对路径问题&#xff09; 2. 编写Dockerfile Copy Code FROM…

扫地机器人苦寻新引擎,大疆们却已攻入腹地

原创 科技新知 前沿科技组 作者丨江篱 编辑丨樱木、九黎 竞争激烈的扫地机器人赛道&#xff0c;迎来了新玩家。 据近日相关报道&#xff0c;大疆扫地机器人产品已开始量产&#xff0c;预计将于6月份发布。消息称大疆研发扫地机器人已超过四年&#xff0c;即将上市的产品是扫…

【C++】22. 红黑树封装实现Mymap和Myset

上一章节我们实现了红黑树&#xff0c;这一章节我们就用红黑树封装来实现一个我们自己的map和set 1. 源码及框架分析 SGI-STL 3.0版本的源代码中&#xff0c;map和set的实现主要分布在若干头文件中&#xff0c;这些头文件构成了这两个容器的完整实现架构&#xff1a; 核心头文…

02_redis分布式锁原理

文章目录 一、redis如何实现分布式锁1. 使用 SETNX 命令2. 设置过期时间3. 释放锁4. 注意事项5. 示例代码二、Java中分布式锁如何设置超时时间1. Redis分布式锁2. 基于Zookeeper的分布式锁3. 基于数据库的分布式锁注意事项一、redis如何实现分布式锁 Redis 实现分布式锁是一种…

酷派Cool20/20S/30/40手机安装Play商店-谷歌三件套-GMS方法

酷派Cool系列主打低端市场&#xff0c;系统无任何GMS程序&#xff0c;也不支持直接开启或者安装谷歌服务等功能&#xff0c;对于国内部分经常使用谷歌服务商店的小伙伴非常不友好。涉及机型有酷派Cool20/Cool20S /30/40/50/60等旗下多个设备。好在这些机型运行的系统都是安卓11…

技术为器,服务为本:AI时代的客服价值重构

在智能化浪潮中&#xff0c;大语言模型的出现为客户服务行业注入了全新动能。然而技术创新的价值不在于技术本身&#xff0c;而在于其赋能服务的深度与广度。AI对于我们来说&#xff0c;如同发动机之于汽车&#xff0c;重要的不是引擎参数&#xff0c;而是整车带给用户的驾驶体…

技术创新如何赋能音视频直播行业?

在全球音视频直播行业的快速发展中&#xff0c;技术的持续创新始终是推动行业进步的核心动力。作为大牛直播SDK的开发者&#xff0c;我很荣幸能分享我们公司如何从产品的维度出发&#xff0c;精准把握市场需求&#xff0c;并不断推动产品的发展&#xff0c;以满足不断变化的行业…

Linux线程池(下)(34)

文章目录 前言一、v3版本二、单例模式概念特点简单实现 三、其余问题STL线程安全问题智能指针线程安全问题其他锁的概念 总结 前言 加油&#xff01;&#xff01;&#xff01; 一、v3版本 「优化版」&#xff1a;从任务队列入手&#xff0c;引入 「生产者消费者模型」&#xff…

Netty 实战篇:Netty RPC 框架整合 Spring Boot,迈向工程化

本文将基于前面构建的 RPC 能力&#xff0c;尝试将其与 Spring Boot 整合&#xff0c;借助注解、自动扫描、依赖注入等机制&#xff0c;打造“开箱即用”的 Netty RPC 框架&#xff0c;提升开发效率与工程规范。 一、为什么要整合 Spring Boot&#xff1f; 手动 new 实例、写注…

Axure中继器学习笔记

一、中继器概述 中继器(Axure Repeater)是Axure中的高级组件&#xff0c;功能类似于数据集成器&#xff0c;主要用于&#xff1a; 数据存储与管理 数据的增删改查操作 数据的分页与展示控制 二、中继器基本使用流程 数据存储&#xff1a;将数据储存在中继器组件中 数据展…

hf-mirror断点续传下载权重

直接浏览器双击一个一个下载 这种方式不支持断点续传 dnf install git-lfs -y 下面成功跳过 LFS 权重下载只拿到 Git 元数据和 LFS 占位符文件了 GIT_LFS_SKIP_SMUDGE1 git clone https://hf-mirror.com/Tongyi-Zhiwen/QwenLong-L1-32B cd QwenLong-L1-32B git lfs install -…

【软件安装那些事 3 】CAD(2026 V60.7z) 安装教程(中文简体版)步骤完整不跳步 { 附软件提取下载链接,永久有效---------百度网盘 }

通过网盘分享的文件&#xff1a;CAD2026 V60.7z 安装包 中文 &#xff08;永久有效&#xff09; 链接: https://pan.baidu.com/s/122UXbOK9iGsD5Ld-lzrfAA?pwdneqd 提取码: neqd 1、解压完成后&#xff0c;打开【Setup】文件夹 2、鼠标右击【Setup】…

RK3399 Android7.1增加应用安装白名单机制

通过设置应用包名白名单的方式限制未授权的应用软件安装。 diff --git a/frameworks/base/services/core/java/com/android/server/pm/PackageManagerService.java b/frameworks/base/services/core/java/com/android/server/pm/PackageManagerService.java index af9a533..ca…