表单项样式1(输入框,选择框)

news2024/11/24 14:55:24

样式均写在全局文件下(src/assets/style/home.scss)
1、选择框
效果:
在这里插入图片描述
选择时:
在这里插入图片描述
代码:

//选择框
.el-select{
			.el-input__inner{
							border-radius: 0px;
							font-size: 14px;
							color: #CBEEFF;
							background: rgba(23,111,172,0.12);
							border: 1px solid #255a8a;
						}
			
		}
//鼠标悬浮、选中效果
.el-select:hover .el-input__inner,.el-select .el-input__inner:focus{
	border-color: #409cef !important;
}
//下拉图标
.el-select .el-input .el-select__caret{
	color: rgb(203,238,255,0.5)
}
//占位符
.el-select ::placeholder{
  color: rgb(203,238,255,0.5) !important;
}
//下拉框
.el-select-dropdown{
	background-color:#0d2133 !important;
	border: 1px solid #255a8a !important;
	.el-select-dropdown__item.selected{
		color: #cbeeff !important;
		background-color: #186893 !important;
	}
	.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
	    background-color: #4886a7 !important;
	}
	.el-select-dropdown__item{
		color: #cbeeff !important;
	}
}

2、输入框
效果
在这里插入图片描述
代码:

.el-input{
			.el-input__inner{
							border-radius: 0px;
							font-size: 14px;
							color: #CBEEFF;
							background: rgba(23,111,172,0.12);
							border: 1px solid #255a8a;
						}
			
		}
//鼠标悬浮,选中效果
.el-input:hover .el-input__inner,.el-input .el-input__inner:focus{
	border-color: #409cef !important;
}
//占位符
.el-input ::placeholder,{
  color: rgb(203,238,255,0.5) !important;
}

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

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

相关文章

当「华为还是备选,迪爹还是迪子」时宇宙厂一面原题

写在前面 2021 年还是互联网元年,当时常规的华为 Offer 还是普遍人的备选,如今的迪爹(BYD)也还是 "来投就给 Offer" 的迪子。 只有字节,当时是公认炙手可热的"宇宙厂"。 作为在 2021 就提前体验了…

TikTok小店运营秘籍:打造有温度的社交电商

引言 TikTok作为全球短视频平台的领军者,日渐成为创业者和小商家的新天地。通过TikTok小店,创业者们可以将独特的产品呈现给全球观众。 然而,要在这个竞争激烈的市场中脱颖而出,不仅需要敏锐的商业嗅觉,还需要打造一个…

网易云音乐7天黑胶VIP会员免费领取入口怎么领取网易云音乐黑胶VIP7天会员?

网易云音乐7天黑胶VIP会员免费领取入口怎么领取网易云音乐黑胶VIP7天会员? 1、百度搜索「词令」,在搜索框内输入词令「vip163」关键词直达口令,进入网易云音乐7天黑胶VIP会员免费领取入口; 2、输入网易云音乐黑胶VIP7天会员领取词…

Intellij Idea 调试界面断点“下一步” 按钮不见了怎么办

问题图示例: 原因 Debug 工具栏( Toolbar )被隐藏了 解决方案 操作步骤 点击Debug面板设置图标->再点击 Show Toobar 点击后效果 工具栏再现,又可以愉快的下一步了 Debug 图标设置按钮一般位于Debug面板的右上角

智能物流时代:快递物流信息订阅与推送API自动推送物流变更信息

引言 在当今数字化和智能化的时代,物流行业也在迅速演变,通过技术创新提高效率、提升服务质量。其中,快递物流信息订阅与推送API的自动推送功能成为推动物流领域发展的重要驱动力。本文将深入探讨这一趋势,并分析快递物流信息订阅…

为什么制定交易策略要根据资金量,澳福一个例子说清楚

为什么制定交易策略要根据资金量。其实很简单,澳福一个例子说清楚。 假如投资者现在有一大笔资金,就可以用这笔资金的1个百分点的利息来支付自己的日常开支,一百万的1%利息就足够了,可以支付你想要的一切。澳福和各位投资者是不是…

如何使用Java支付宝沙箱环境并公网调用sdk创建支付单服

Java支付宝沙箱环境支付,SDK接口远程调试【内网穿透】 1.测试环境 MavenSpring bootJdk 1.8 2.本地配置 获取支付宝支付Java SDK,maven项目可以选择maven版本,普通java项目可以在GitHub下载,这里以maven为例 SDK下载地址:https://doc.open.alipay.com…

python之yaml技术(可用于写接口自动化的测试用例文件)

一.yaml介绍 yaml文件是一种配置文件类型,相比较ini,conf配置文件来说,更加的简洁,操作也更加简单,同时可以存放不同类型的数据。 yaml使用场景 配置文件 测试用例 二.yaml语法 大小写敏感 使用缩进表示层级关系…

Electronica慕尼黑电子展 Samtec团队与21ic分享虎家产品与方案

【摘要/前言】 “希望但凡是能够使用到连接器的场合都有Samtec的身影” 在慕尼黑上海电子展现场,Samtec华东区销售经理章桢彦先生在与21ic副主编刘岩轩老师的采访中,如是说道。这是一种愿景,更是Samtec的努力方向。短短一句话,…

linux 搭建Nginx网页(编译安装)

♥️作者:小刘在C站 ♥️个人主页: 小刘主页 ♥️不能因为人生的道路坎坷,就使自己的身躯变得弯曲;不能因为生活的历程漫长,就使求索的 脚步迟缓。 ♥️学习两年总结出的运维经验,以及思科模拟器全套网络实验教程。专栏:云计算技…

计算机组成原理-Cache写策略

文章目录 总览写命中写回法全写法 写不命中写分配法非写分配法 多级Cache总结 总览 写命中 写回法 数据不一致指的是Cache中的和主存中的数据不一致 全写法 写缓冲 利用写缓冲使得将写入Cache的数据在写入Cache的数据同时也会写入写缓冲。然后再在 CPU在干其他事时有控制电…

linux进入telnet和推出telnet

安装telnet centos7 yum install -y telnet ubuntu apt install -y telnet 进入telnet telnet ip port 退出telnet 1. 按下下面的组合键 ctrl] 2. 输入下面命令推出 quit

安卓手机如何使用JuiceSSH连接内网的Linux虚拟机并实现远程访问?

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 SFTP(SSH File Transfer Protocol)是一种基于SSH(Secure Shell)安全协议的文件传输协议。与FTP协议相比,SFTP使用了…

JVM中的双亲委派模型

双亲委派模型(Parent-Delegation Model)是Java类加载器(ClassLoader)机制的一种实现方式。它是Java中实现类加载的一种层次结构模型。 双亲委派模型的工作过程是:在Java中,每个类加载器实例都有一个父类加载…

探索人类命运与宇宙奥秘的震撼之旅 豆瓣高分巨作《三体》湖北卫视开播

当思考触及宇宙的边缘,当人类命运与外星文明相碰撞,电视剧《三体》以其深邃的内涵和引人深思的故事,重新审视人类的过去、现在和未来,带我们逐步揭开地外未知文明“三体”世界的神秘面纱。根据著名科幻作家刘慈欣同名小说改编&…

HarmonyOS ArkTS 使用DevEco Studio高效开发(十三)

1、快速开始 打开IDE后,在IDE上边栏有个Help入口,里面有一个Quick Start快速开始入口,点击进去就会进入到快速开始面板。在这个面板中会有一些快速入门的实验指导和一些常用的链接。快速开始相当于一个收藏夹,把最常用的一些学习…

测试开发必备10大技能,你达标了吗?

一个人到底要走多少弯路,才能成为一名合格的测试开发工程师? 近年来,随着敏捷开发、微服务架构、DevOps逐渐深入人心,软件行业发生了翻天覆地的变化。相应地,软件测试行业也洗牌加剧: 软件测试的准入门槛&a…

Drupal XSS漏洞(CVE-2019-6341)

漏洞描述 影响软件:Drupal方式:通过文件模块或者子系统上传恶意文件触发XSS漏洞参考链接:Drupal 1-click to RCE 分析效果:JS代码执行(Cookies 资料窃取、会话劫持、钓鱼欺骗、网页挂马等) 漏洞环境及利用…

使用 yum 出现 Loaded plugins: fastestmirro

📑前言 本文主要是使用 yum 出现 Loaded plugins: fastestmirro,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是青衿🥇 ☁️博客首页:CSDN主页放风讲故事 🌄每日…

2027年,人工智能(AI)用电量或相当于荷兰一年用电量 |魔法半周报

我有魔法✨为你劈开信息大海❗ 高效获取AIGC的热门事件🔥,更新AIGC的最新动态,生成相应的魔法简报,节省阅读时间👻 🔥资讯预览 2027年,人工智能(AI)用电量或相当于荷兰一…