vue中有关el-input 的有关样式

• 2019 年 10 月 8 日
• 笔记

1.png

2.png

• 使用/deep/ 是因为使用了 less 作为预处理器。

<el-input v-model="inTxt" placeholder="请输入您要搜索的信息" @keyup.enter.native="search" @focus= 'focus($event)'></el-input>    /// 鼠标获得焦点之后，全选已经输入的字符串。   focus(event) {                  event.currentTarget.select();              },            /deep/ input::-webkit-input-placeholder {          color: @txtColor;          font-size: 20px;      }        /deep/ input::-moz-input-placeholder {          color: @txtColor;          font-size: 20px;      }        /deep/ input::-ms-input-placeholder {          color: @txtColor;          font-size: 20px;      }        ///  当el-input  获得焦点的时候，让提示语不显示的方法，就是让他透明。            /deep/ input:focus::-webkit-input-placeholder {          color: transparent;          /* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 */      }          /* Mozilla Firefox 4 to 18 */        /deep/ input:focus:-moz-placeholder {          color: transparent;      }          /* Mozilla Firefox 19+ */        /deep/ input:focus::-moz-placeholder {          color: transparent;      }          /* Internet Explorer 10+ */        /deep/ input:focus:-ms-input-placeholder {          color: transparent;      }