iview框架的input框的placeholder的样式修改

最新推荐文章于 2026-06-24 17:48:14 发布

原创最新推荐文章于 2026-06-24 17:48:14 发布 · 3.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文分享了如何使用CSS自定义input输入框的样式，包括改变占位符颜色及解决即使设置border为none仍出现灰色边框的问题。通过深入探讨/deep/伪类选择器的应用，实现了input框在不同状态下的视觉效果优化。

 /deep/ .ivu-input::-webkit-input-placeholder{
        color:#04C1D6;
    }
    /deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:#04C1D6;
    }
    /deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:#04C1D6;
    }
    /deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
        color:#04C1D6;
    }

关于input框就算border设置为None,也有灰色的边
是因为

 /deep/ .ivu-input{
        position:relative;
        //获得焦点之后还是有白色的边
        box-shadow: none;
        color:#04C1D6;
        border:none;
        background:none;
        border-radius: 0;
    }