element ui修改时间框背景色和边框色

原创已于 2023-11-24 15:47:41 修改 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2023-11-17 10:46:22 首次发布

element组件样式修改（用于驾驶舱大屏）专栏收录该内容

4 篇文章

订阅专栏

文章详细描述了如何使用CSS样式修改ElemeUI(El-date-picker)的时间输入框、边框和范围分隔符的颜色，包括背景色和字体设置。

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

一、修改时间输入框的背景和边框字体颜色

 <div class="hright">
      <el-date-picker :popper-append-to-body="false" class="custom-timeselect" v-model="form.timevalue" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" size="mini" value-format="yyyy-MM-dd" style="width: 200px">
      </el-date-picker>
</div>

/* 改变整个输入框的字体颜色背景 */

.hright /deep/ .el-input__inner{
  border: 1px solid #326AFF;
  background: #04308D !important;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}
/* 改变 两个时间的    字体颜色背景 */

.hright /deep/ .el-input__inner .el-range-input{
  background: #04308D !important;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}
/* 改变 至 的    字体颜色背景 */
.hright /deep/ .el-input__inner .el-range-separator{
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}