element ui公共样式修改

weixin_47115952

已于 2022-02-28 11:09:12 修改

阅读量708

点赞数

CC 4.0 BY-SA版权

文章标签： ui vue.js css

于 2022-02-28 10:58:11 首次发布

本文链接：https://blog.csdn.net/weixin_47115952/article/details/123177729

本文将介绍如何针对Element UI库进行自定义和公共样式的修改，内容涵盖Vue.js项目中对Element UI组件样式覆盖的方法，以及如何使用CSS实现特定的样式调整，帮助开发者打造个性化的UI体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	/* 请浮动 */
	.clearFix:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		*zoom: 1;
	}

	/*定投消息弹框文字加背景样式修改*/

	.el-message-box__title {
		color: #B41717 !important;
	}

	.el-message-box__message {
		color: #B41717 !important;
	}

	.el-button {
		color: #B21515 !important;
	}

	.el-table__empty-text {
		color: #B21515 !important;
	}

	.el-button--primary {
		width: 66px !important;
		height: 31px !important;
		color: #FFD692 !important;
		background-color: #B21515 !important;
		border-color: #B21515 !important;
	}

	/*alert 成功弹出框样式*/
	.el-message--success {
		background-image: url(assets/img/1引导页.jpg) !important;
		color: #B41717 !important;
		border: 1px solid #EDBFB0 !important;
	}

	.el-message--success .el-message__content {
		color: #B41717 !important;
	}

	.el-icon-success:before {
		content: "" !important;
	}

	.el-message {
		background-image: url(assets/img/1引导页.jpg) !important;
		color: #B41717 !important;
		border: 1px solid #EDBFB0 !important;
	}

	/* alert 默认弹出框样式 */
	.el-message--info .el-message__content {
		color: #B41717 !important;
	}

	.el-icon-info:before {
		content: "" !important;
	}

	/*element table表格样式  */
	.el-table {
		width: 92% !important;
		margin: 0 auto !important;
	}

	.el-table th,
	.el-table tr {
		background: rgba(127, 12, 14, 0.01) !important;
	}

	.el-table {
		background: rgba(127, 12, 14, 0.1) !important;
	}

	.el-table thead {
		font-size: 15px !important;
		color: #B21515 !important;
	}

	.el-table td,
	.el-table th.is-leaf {
		border-bottom: none !important;
	}

	.el-table .cell {
		color: #B41717 !important;
	}

	.el-table__expand-icon {
		color: #B41717 !important;
	}

	.el-dialog {
		background-image: url(assets/img/1引导页.jpg) !important;
	}

	.el-dialog__title {
		color: #B41717 !important;
	}

	.el-form-item__label {
		color: #B41717 !important;
	}

	.el-radio {
		color: #B41717 !important;
	}

	.vue-treeselect__single-value {
		color: #B41717 !important;
	}

	.el-input__inner:hover {
		border-color: #B41717 !important;
	}

	.vue-treeselect--searchable .vue-treeselect__input-container {
		line-height: 20px !important;
	}

	.vue-treeselect--searchable .vue-treeselect__input-container input {
		color: #B41717 !important;
	}

	.vue-treeselect__placeholder {
		color: #CE7871 !important;
	}

	/* 树状下拉结构层级被隐藏 */
	.el-col-12 .el-form-item .el-form-item__content {
		z-index: 0 !important;
	}

	.sletes .el-form-item__content {
		z-index: 0 !important;
	}

	.vue-treeselect__menu-container {
		color: #B41717 !important;
		z-index: 999999999 !important;
	}

	.el-input::-webkit-scrollbar-track {
		background-color: #F3DDD4 !important;
	}

	input::placeholder {
		color: #CE7871 !important;
	}

	.el-input__inner {
		color: #B41717 !important;
	}

	.vue-treeselect__control {
		background-color: #F3DDD4 !important;
	}

	/* 日期弹框 */
	.el-input__inner {
		background-color: #F3DDD4 !important;
	}

	.el-picker-panel {
		background-color: #F3DDD4 !important;
	}

	.el-popper[x-placement^=bottom] .popper__arrow {
		border-bottom-color: #F3DDD4 !important;
	}

	/* input框 */
	.gjzreach input {
		/* width: 260px; */
		background: #F3DDD4;
		padding: 7px 0px;
		border-radius: 3px;
		padding-left: 10px;
		box-sizing: border-box;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		color: #B21515;
	}

	/* input框聚焦事件 */
	.gjzreach input:focus {
		border-color: #B21515;
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(178, 1, 1, .6);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(178, 1, 1, .6)
	}



	/* 文件列表 */
	.el-upload-list__item-name {
		color: #A22124 !important;
	}
/*table表格鼠标放上去的hover效果*/
	.el-table tbody tr:hover>td {
		background-color: rgba(127, 12, 14, 0.1)!important
	}
	.massageTime{
		margin-bottom: 30px;
	}
/*文件上传*/
	.el-upload__tip{
		color: #A22124 !important;
	}
	/* raido样式 */
	.el-radio__input.is-checked .el-radio__inner {
	    border-color: #B21515 !important;
	    background: #B21515 !important;
	}
	.el-radio__input.is-checked+.el-radio__label {
	    color: #B21515 !important;
	}
	/* checkbox复选框 */
	.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-        
   indeterminate .el-checkbox__inner {
	    background-color: #B21515 !important;
	    border-color: #B21515 !important;
	}
	/* table行间样式 */
	.el-table td, .el-table th.is-leaf{
		border-bottom: none !important;
	}
/*table行间底部样式*/
	.el-table--border::after, .el-table--group::after, .el-table::before{
		background-color: none !important;
	}