tft每日頭條

 > 生活

 > elementui中input控制長度

elementui中input控制長度

生活 更新时间:2024-07-23 02:12:57

element-plus版本:v2.2.0

vue版本:v3.0.0

<el-input v-model="dataInput" class="input-border-style" placeholder="請輸入信息"> </el-input>

關于el-input的CSS樣式:

  • .input-border-style 自定義的樣式類
  • .el-input.is-disabled .el-input__inner element-plus的樣式類
  • .el-input.is-disabled element-plus的樣式類
  • .el-input__inner element-plus的樣式類

/** 默認樣式 */ .input-border-style{ border:1px solid #47c9FF; border-radius:3px; padding-left: 10px; } /** el-input disabled時的文字顔色*/ .el-input.is-disabled .el-input__inner{ color:#d61616; } /** el-input disabled時的背景和邊框*/ .el-input.is-disabled{ background:#dbdada; border: 1px solid #868686; } /** el-input 正常模式下、readonly模式下的文字顔色 */ .el-input__inner{ color:#00ccff; }

正常的樣式:

elementui中input控制長度(elementplusel-input修改文字背景)1

disabled 無内容:

elementui中input控制長度(elementplusel-input修改文字背景)2

disabled 有内容:

elementui中input控制長度(elementplusel-input修改文字背景)3

使用到的顔色:

elementui中input控制長度(elementplusel-input修改文字背景)4

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved