zoukankan      html  css  js  c++  java
  • 修改 input/textarea 标签属性 placeholder 文本的颜色

    一、改变 placeholder 文本颜色的方法如下:

    /* Chrome */
    ::-webkit-input-placeholder{
      color: #1890ff;
    }
    /* IE 10+ */
    :-ms-input-placeholder{
      color: #1890ff;
    }
    /* Firefox 4-18 */
    /* Firefox 19+ */
    :-moz-placeholder,
    ::-moz-placeholder{
      color: #1890ff;
      opacity: 1;
    }
    

    二、需要注意的有三点:

    1. 如果项目中使用了UI框架(例如:ElementUI),那么设置可能会不起效,因为其框架底层已进行过设置,所以需要提升其优先级。
    /* 推荐 */
    .el-input ::-webkit-input-placeholder{
      color: #1890ff;
    }
    /* 添加关键词 !important */
    ::-webkit-input-placeholder{
      color: #1890ff !important;
    }
    
    1. 将他们设置在一起时不会起效:
    /* 一起设置 */
    ::-webkit-input-placeholder,
    :-ms-input-placeholder{
      color: #1890ff;
    }
    /* 或者改变顺序 */
    :-ms-input-placeholder,
    ::-webkit-input-placeholder{
      color: #1890ff;
    }
    
    1. Firefox 浏览器表现稍微有些区别,颜色上要比 IE 和 Chrome 浏览器浅一些,所以需要配合 opacity 一起使用。
    /* Firefox 4-18 */
    /* Firefox 19+ */
    :-moz-placeholder,
    ::-moz-placeholder{
      color: #1890ff;
      opacity: 1;
    }
    

    三、效果展示:

  • 相关阅读:
    取消GridView/ListView item被点击时的效果 记录学习
    EditText 几种显示方式,固定行数,自适应行数
    Android 判断当前屏幕是横屏还是竖屏
    Android 用代码设置Shape,corners,Gradient
    Android 横屏不让输入法全屏显示
    js-JavaScript高级程序设计学习笔记7
    js-FCC算法-Pairwise
    js-JavaScript高级程序设计学习笔记6
    js-JavaScript高级程序设计学习笔记5
    js-自制轮播插件!
  • 原文地址:https://www.cnblogs.com/yqynote/p/13855513.html
Copyright © 2011-2022 走看看