vant如何修改placeholder樣式

Posted on by

如何修改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屬性樣式的多種寫法

我們經常用到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;
}

其實還有很多種方法，這有待我們去發現，好瞭，今天就分享到這裡，有疑問的請留言。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：