vant如何修改placeholder樣式
更新時間：2022年05月24日 16:49:08 作者：小糖穿越火線
這篇文章主要介紹了vant如何修改placeholder樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何修改placeholder樣式
::-webkit-input-placeholder {
color: #ffffff;
font-weight: 400;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: #ffffff;
font-weight: 400;
}
/* Firefox 19-50 */
::-moz-placeholder {
color: #ffffff;
font-weight: 400;
}
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #ffffff !important;
font-weight: 400 !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #ffffff;
font-weight: 400;
}
/* CSS Working Draft */
::placeholder {
color: #ffffff;
font-weight: 400;
}設(shè)置placeholder屬性樣式的多種寫法
我們經(jīng)常用到placeholder屬性是在input標簽里面，placeholder屬性主要作用是讓輸入框有個提示的顯示。
那當我們想要改變placeholder屬性中文字的大小顏色等樣式時，又如何設(shè)置呢？
我們先來看一下正常的placeholder屬性樣式：
<input type="text" placeholder="正常的樣式">
效果圖：
上面的樣式就是placeholder屬性默認的樣式，如果我們想要突出字體，是不是想把字體顏色改變一下，接下來我們試一下把字體顏色改為紅色，先想一下該如何設(shè)置呢？
效果圖：
代碼：
第一種最簡單的寫法
在谷歌瀏覽器中使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)置placeholder屬性樣式的多種寫法</title>
</head>
<style>
input::placeholder{
color:#DD5A5D;
}
</style>
<body>
<input type="text" placeholder="字體顏色為紅色">
</body>
</html>第二種寫法
注：因為不同瀏覽器的兼容性不同，所以在寫代碼方面也會有所差別。
input::-webkit-input-placeholder{ /* 使用webkit內(nèi)核的瀏覽器 */
color: #E0484B;
}
input:-moz-placeholder{ /* Firefox版本4-18 */
color: #E0484B;
}
input::-moz-placeholder{ /* Firefox版本19+ */
color: #E0484B;
}
input:-ms-input-placeholder{ /* IE瀏覽器 */
color: #E0484B;
} 注： 冒號前可寫相對應(yīng)的input或textarea元素等，也可以省略不寫，直接冒號開頭。
第三種寫法
有種寫法雖然是復雜了點，但還是要介紹一下。
input[type='text']::-webkit-input-placeholder{ /* 使用webkit內(nèi)核的瀏覽器*/
color: #E97F81;
}
input[type='text']:-moz-placeholder{ /* Firefox版本4-18 */
color: #E0484B;
}
input[type='text']::-moz-placeholder{ /* Firefox版本19+ */
color: #E0484B;
}
input[type='text']:-ms-input-placeholder{ /* IE瀏覽器 */
color: #E0484B;
} 注：第三種寫法中的text是相對應(yīng)html中的text，如果是密碼框，那么相對應(yīng)的就是password。
例如：
html：
<input type="password" placeholder="字體顏色為紅色">
css：
input[type='password']::-webkit-input-placeholder{ /* 使用webkit內(nèi)核的瀏覽器*/
color: #E97F81;
}其實還有很多種方法，這有待我們?nèi)グl(fā)現(xiàn)，好了，今天就分享到這里，有疑問的請留言。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中我們可以使用ref屬性來獲取子組件的實例對象,這個功能非常方便,這篇文章主要給大家介紹了關(guān)于Vue獲取子組件實例對象ref屬性的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue 中常見的時間格式轉(zhuǎn)換,需要的朋友可以參考下2022-05-05
基于Vue3實現(xiàn)SSR(服務(wù)端渲染)功能
在現(xiàn)代網(wǎng)頁開發(fā)中,用戶體驗日益成為網(wǎng)站成功的重要因素,從加載時間到SEO優(yōu)化,越來越多的開發(fā)者開始關(guān)注使用服務(wù)端渲染（SSR）來提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實現(xiàn)這一功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue實現(xiàn)折疊展開收縮動畫,通過scrollHeight實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了詳解Vue2.x-directive的學習筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)手指滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要給大家整理了在Vue開發(fā)中整合axios要用到的文件，在vue開發(fā)中，不可避免要整合axios，文中通過示例代碼介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了vue ajax 攔截原理與實現(xiàn)方法,結(jié)合實例形式分析了vue.js基于ajax攔截實現(xiàn)無刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在Vue.js中頁面跳轉(zhuǎn)是前端開發(fā)中常見的需求,Vue提供了多種頁面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下2024-02-02