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

el-date-picker

1.给el-date-picker添加id=starttime

<el-date-picker
   id="starttime"
   v-model="beginEndTime"
   @change="handelOnSearchhange"
   type="datetimerange"
   :picker-options="pickerOptions"
   range-separator="至"
   start-placeholder="选择任务开始时间"
   end-placeholder="选择任务结束日期"
   align="right"
 ></el-date-picker>

2.在css中修改样式

.task_list .filterTools {
  /deep/#starttime::-webkit-input-placeholder {
    color: #4B4B4B;
  }
  /deep/#starttime::-moz-input-placeholder {
    color: #4B4B4B;
  }
  /deep/#starttime::-ms-input-placeholder {
    color: #4B4B4B;
  }
}

el-input

直接在css中改变样式

.task_list .filterTools {
  /deep/input::-webkit-input-placeholder {
    color: #4B4B4B;
  }
  /deep/input::-moz-input-placeholder {
    color: #4B4B4B;
  }
  /deep/input::-ms-input-placeholder {
    color: #4B4B4B;
  }
}

需要注意的地方

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

猜你喜欢

转载自blog.csdn.net/weixin_45950826/article/details/106898114
今日推荐