vue更改el-input背景色，更改el-input为下划线上输入的样式

最新推荐文章于 2024-06-05 19:20:06 发布

不想上班只想要钱

最新推荐文章于 2024-06-05 19:20:06 发布

阅读量2.2k

点赞数 1

分类专栏： css 前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Aa12364567/article/details/128498900

版权

前端同时被 3 个专栏收录

150 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

vue更改el-input背景色，更改el-input为下划线上输入的样式

<el-form class="form" :model="login" :rules="validationRules" ref="userForm">
          <el-form-item prop="userName" style="margin-bottom: 45px!important;" class="username">

            <el-input style="background: transparent !important;" v-model.trim="login.userName"
              prefix-icon="iconfont icon-mima" placeholder="请输入用户名">
              <i slot="prefix" class="icon-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名</i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom: 45px!important;" class="password">
            <el-input v-model.trim="login.password" prefix-icon="iconfont icon-mima" :type="passw" placeholder="请输入密码">
              <i slot="suffix" :class="icon" @click="showPass"></i>
              <i slot="prefix"
                class="icon-password">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码</i>
            </el-input>
          </el-form-item>

        </el-form>

*/deep/.el-input-group__append {
  border-left: 0;
  width: 90px;
  height: 40px;
  padding: 0;
  font-size: 0;
}

.form /deep/.el-input__inner {
  border-radius: 0px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 2px;
  padding-left: 120px;
  border-bottom-color: rgba(0, 187, 255, 0.4);
  background-color: transparent !important;
}