自定义时间框小图标

勤奋的懒洋洋350

于 2022-10-20 17:31:19 发布

阅读量574

点赞数

文章标签： ElDatePicker CSS 样式定制日期时间选择器前端美化

本文链接：https://blog.csdn.net/weixin_64374806/article/details/127431530

版权

效果图:

1.html

 <div class="block">
           <span class="demonstration">默认</span>
            <el-date-picker
              style="width: 400px;"
              v-model="value1"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>

2.css样式



/* 日期小图标开始 */
/deep/.el-date-editor .el-range-separator {
  color: #979797 !important;
  width: 8%;
  font-size: 20px;
}

/deep/ .el-date-editor .el-range__icon {
  position: absolute;
  right: 5px;
  top: 1px;
  color: #c0c4cc;
}

/deep/.el-date-editor--daterange.el-input__inner {
  width: 338px;
}

/deep/.el-range-editor--small .el-range-input {
  font-size: 12px;
}
/deep/.el-icon-time {
  background: url('../../../../assets/pictures/date.png') center no-repeat;
  cursor:pointer 
}
/deep/.el-icon-time:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

/deep/.el-input__prefix {
  width: 0;
  left: 92% !important;
}