修改el-date-picker、文本域及el-input占位文本placeholder的颜色

时间:2025-01-22 15:58:19

el-date-picker

//时间选择框的占位字符颜色更改
.task_list {
  .filterTools {
    input::-webkit-input-placeholder {
      color: #4d4d4d;
    }
    input::-moz-input-placeholder {
      color: #4d4d4d;
    }
    input::-ms-input-placeholder {
      color: #4d4d4d;
    }
  }
}

el-input

.el-input__inner::placeholder {
  color: rgba(51, 51, 51, 0.5);
}
/* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color: rgba(51, 51, 51, 0.5);
}
/* 火狐 */
.el-input__inner:-moz-placeholder {
  color: rgba(51, 51, 51, 0.5);
}
/*ie*/
.el-input__inner:-ms-input-placeholder {
  color: rgba(51, 51, 51, 0.5);
}

文本域

//文本域占位字符颜色更改
::-webkit-input-placeholder{
  color:  rgba(51, 51, 51, 0.5) !important;
}

需要注意的地方

1./deep/深度选择器:如果不加/deep/样式也能改变就可以不加,如果不能改变就需要加上/deep/
2.时间选择器改变css样式时,需要选择到父元素(filterTools)的父元素(task_list),否则无法改变样式。