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

样式均写在全局文件下(src/assets/style/home.scss)

1、选择框

效果:

选择时:

代码:

javascript 复制代码
//选择框
.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、输入框

效果

代码:

javascript 复制代码
.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;
}
相关推荐
彭亚川Allen3 分钟前
985 在职研究生到底怎么样?是不是水硕?是不是.....?
前端·后端·程序员
YufJi5 分钟前
两棵树,两个线程:一个小程序引擎的架构拆解
前端
super_Omni14 分钟前
Chrome 插件入驻实战:从 Manifest V3 到过审上架的完整路径
大数据·前端·chrome
腾讯数据架构师31 分钟前
任务跑完怎么直接出图表?CubeStudio 任务可视化 ECharts 数据格式实操(CSV/JSON + metric.json,11 种图表一键渲染)
前端·json·echarts·数据可视化
小小小米粒37 分钟前
不是在构造方法「之前」修饰 Bean、注入;是构造方法跑完之后,才做属性注入,再跑 @PostConstruct。
前端
小李科技1 小时前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
QianhangQianping1 小时前
一块大屏的数据在浏览器里怎么变成画面:背景、子屏、前景三层结构
前端·低代码·架构·编辑器·数据可视化·大屏可视化
梦想很大很大1 小时前
让 Codex 自由发挥,给 nvm-desktop 换个 UI
前端·人工智能·设计
蓝莓味的口香糖1 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
shennv8881 小时前
接入大模型流式输出后,文字偶尔乱码?问题可能出在前端
前端