關於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;
}
加了上面的程式碼 如 圖四 一樣 

圖一
圖二

圖三

圖四