改变 el-input默认的颜色

249 阅读1分钟

html部分:

<el-input class="input-form" type="text" ref="username" placeholder="请输入用户名"></el-input>
         

css部分:

<style scoped lang="scss">
.inputForm {
        width: 100%;
        :deep(.el-input__wrapper) {
          padding-left: 0px 10px 0px;
          background: linear-gradient(180deg, rgba(6, 52, 88, 0.9) 0%, rgba(7, 96, 155, 0.9) 100%);
          border-radius: 8px 0 0 0;
          /* 边框颜色 */
          border: 1px solid rgba(0, 221, 255, 0.5);
          box-shadow: 0 0 0px rgba(0, 221, 255, 0.5);
        }
        :deep(.el-input__inner) {
          padding-left: 5px;
          padding-right: 0px;
          color: #fff;
          border-color: rgba(0, 221, 255, 0.5);
          &::placeholder {
            color: #fff; /* placeholder文字颜色 */
          }
          &:focus {
            outline: none; /* 移除默认的焦点轮廓 */
            /* 可选:阴影效果 */
            box-shadow: 0 0 5px rgba(0, 221, 255, 0.5);
          }
        }
        
      }
 </style>