vant如何修改placeholder樣式

2022-05-24 22:01:44

如何修改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;
}

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。