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。