自定义ElementUI样式以符合项目需求

自定义ElementUI样式以符合项目需求

在项目开发中，我们经常需要根据页面设计的特定要求对ElementUI进行样式自定义。以下是我项目中的一些自定义样式的实践。是通过f12调试出来的。

需要注意的是，这些自定义样式可能需要根据ElementUI的版本进行调整，以确保兼容性。

选择框样式调整

效果图

• 选择框没事件发生时，本来是框架主题默认的绿色，我们调成了灰色 #e4e7ed

样式自定义

/*输入框获得焦点时*/
/deep/ .el-input__inner:focus{
   border-color: #6D8958;
 }
/*选择框内项目被选*/
.el-select-dropdown__item.selected {
  color: #6D8958;
  font-weight: 700
}
/*选择框获得焦点时*/
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border-color: #6D8958;
  transition: all 0.3s;
}
/*选择框没有焦点时*/
/deep/ .el-select .el-input .el-input__inner {
  border-color: #e4e7ed;
}
/*输入框被浏览器自动填充时*/
/deep/ input:-webkit-autofill {
  background-color: #ffffff !important;
  transition: background-color 1000s ease-in-out 0.5s !important;
}

文本域和分页样式调整

效果图

样式自定义

/*输入文本域获得焦点时*/
/deep/ .el-textarea__inner:focus{
  border-color: #6E77F2;
}
/*当前页数颜色*/
/deep/ .el-pager li.active {
  color: #6E77F2;
  cursor: default;
}
/*换页键的颜色*/
/deep/.el-pagination button:hover {
  color: #6E77F2
}
/*鼠标悬浮时，页数的颜色*/
/deep/ .el-pager li:hover {
  color: #6E77F2
}