這篇文章主要介紹“vant怎么修改placeholder樣式”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vant怎么修改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;
}我們經常用到placeholder屬性是在input標簽里面，placeholder屬性主要作用是讓輸入框有個提示的顯示。
那當我們想要改變placeholder屬性中文字的大小顏色等樣式時，又如何設置呢？
我們先來看一下正常的placeholder屬性樣式：
<input type="text" placeholder="正常的樣式">
效果圖：
上面的樣式就是placeholder屬性默認的樣式，如果我們想要突出字體，是不是想把字體顏色改變一下，接下來我們試一下把字體顏色改為紅色，先想一下該如何設置呢？
效果圖：
代碼：
在谷歌瀏覽器中使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置placeholder屬性樣式的多種寫法</title>
</head>
<style>
input::placeholder{
color:#DD5A5D;
}
</style>
<body>
<input type="text" placeholder="字體顏色為紅色">
</body>
</html>注：因為不同瀏覽器的兼容性不同，所以在寫代碼方面也會有所差別。
input::-webkit-input-placeholder{ /* 使用webkit內核的瀏覽器 */
color: #E0484B;
}
input:-moz-placeholder{ /* Firefox版本4-18 */
color: #E0484B;
}
input::-moz-placeholder{ /* Firefox版本19+ */
color: #E0484B;
}
input:-ms-input-placeholder{ /* IE瀏覽器 */
color: #E0484B;
}注： 冒號前可寫相對應的input或textarea元素等，也可以省略不寫，直接冒號開頭。
有種寫法雖然是復雜了點，但還是要介紹一下。
input[type='text']::-webkit-input-placeholder{ /* 使用webkit內核的瀏覽器*/
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是相對應html中的text，如果是密碼框，那么相對應的就是password。
例如：
html：
<input type="password" placeholder="字體顏色為紅色">
css：
input[type='password']::-webkit-input-placeholder{ /* 使用webkit內核的瀏覽器*/
color: #E97F81;
}關于“vant怎么修改placeholder樣式”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
