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

578 阅读1分钟

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

(1条消息) vue更改el-input背景色,更改el-input为下划线上输入的样式_vue下划线输入框_不想学习只想玩的博客-CSDN博客

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;
}