关于element ui input标签的改造样式

在开发中我们用 element ui 可能会遇到 element ui 给的输入框 或者 （input 输入框 ---- Select 选择器 ----- cascader 级联选择器 日期选择器 日期时间选择器 等等 只要是element ui 带有input 输入框的 我们都可以改变其ui 设计成我们想要的样式 ）

// 比如我们开发中要求的 ui 如下图一所示 但是 element  ui  给的选择框不一样  图二 是element ui给出的ui 图
// 那么我怎么改呢  这里 element  ui 对于输入框 给了一个 class 名 叫 .el-input__inner
//知道了class 名就好办了 第一步 你把你 给的ui参数 用着个 替换（注意 一个要注意 css 文件的加载顺序 因为 后面加载的 会覆盖前面加载的 ）如下( 加上过后 你的 ui就可以 图二 变 图一 )
.el-input__inner{
  background-color: #12304C;
  border-radius:0;
  width: 140px !important;
  height: 34px !important;
  /* border: 1px solid red; */

  color: #59C6C8 !important;
  left: 15px !important;
}


// 上述  是改全局的 （就是 改了 全局都用的这个 ui ）那么问题来 如何改 某个 指定的 input  ui 呢 ，这里 你就要找到  对用 input 的父级 用 css  中的 > 来设置 ，当然你还可以 用js 来做
// 图三你可以 看到 右下角的分页组件 ui 长度不一  这就用到看我上面说的方式
.el-pagination__editor.el-input>input{
  background-color: #081243;
  width: 100px !important;
  height: 48px !important;
  margin-left: 10px !important;
}
加了上面的代码 如 图四 一样 

图一
图二

图三

图四