一、默认提示字颜色修改
不同浏览器的设置略有区别 以下是只选择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。