前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中有关el-input 的有关样式

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

作者头像
用户4344670
发布2019-09-27 16:42:25
1.8K0
发布2019-09-27 16:42:25
举报
文章被收录于专栏:vue的实战

1.png

2.png

  • 使用/deep/ 是因为使用了 less 作为预处理器。
代码语言:javascript
复制
<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;
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.09.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档