VueH5页面中input控件placeholder提示字默认颜色修改与禁用时默认字体颜色修改

一、默认提示字颜色修改

不同浏览器的设置略有区别 以下是只选择name为color的input进行修改

//chrome谷歌浏览器，Safari苹果浏览器
input[name="color"]::-webkit-input-placeholder { /* WebKit browsers */
color: red;
font-size:15px;
}
//firefox火狐浏览器
input[name="color"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
font-size:15px;
}
input[name="color"]::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
font-size:15px;
}
//IE浏览器
input[name="color"]:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
font-size:15px;
}
//或者直接设定input控件都设置：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; }

input:-moz-placeholder, textarea:-moz-placeholder { color: #666; }

input::-moz-placeholder, textarea::-moz-placeholder { color: #666; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; }

 

项目中设置根据不同条件下设置input的提示文字颜色：场景为某个条件下 该input必须要输入内容 所以将提示信息标红.

在vue中需要结合绑定class来控制：

<input type="text" placeholder="请输入不一致原因"
                      class="descJudgeIP" :class="{descJudgeIPNosame:judge.JudgeResult=='0'}" v-model="judge.NosameReason==null?'请输入不一致原因':judge.NosameReason" />

简单解释一下：当judge.JudgeResult=='0'为真是 给该inpute控件追加class-descJudgeIPNosame

然后在css中通过这个class限制设置一下相关input的提示信息为红色即可：

.descJudgeIPNosame::-webkit-input-placeholder {
    color: red;
  }
.descJudgeIPNosame textarea::-webkit-input-placeholder {
    color: red;
 }

最综实现如下效果：

拓展-判断必填input聚焦方法：

this.$refs.noticeReson[checkObj.JudgeIndex].focus();

noticeReson为input对应的ref名称，因为存在同名的多个input，所以需要用下标来具体获取某一个，调用focus事件实现光标聚焦。

二、默认禁用字体颜色修改：

input:disabled, input[disabled]{
color: red;
opacity: 1;
-webkit-text-fill-color:red; // ios 和 安卓9.0 必须添加此属性，才会生效
-webkit-opacity:1;
}

补充拓展解释下-webkit-text-fill-color

默认值：transparent

适用于：所有元素

继承性：有

动画性：是

计算值：指定值

取值：<color>：指定文字的填充颜色

定义文字填充色

若同时设置 -webkit-text-fill-color 和 color 属性，-webkit-text-fill-color 定义的颜色将覆盖 color 定义

通过 -webkit-text-fill-color 属性，可以做出一些例如渐变文字和镂空文字的效果。Demo: 渐变文字 镂空文字 See with Webkit

对应的脚本特性为webkitTextFillColor。