欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vant如何修改placeholder樣式

 更新時(shí)間：2022年05月24日 16:49:08   作者：小糖穿越火線  
這篇文章主要介紹了vant如何修改placeholder樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

我們經(jīng)常用到placeholder屬性是在input標(biāo)簽里面，placeholder屬性主要作用是讓輸入框有個(gè)提示的顯示。 

那當(dāng)我們想要改變placeholder屬性中文字的大小顏色等樣式時(shí)，又如何設(shè)置呢？

我們先來(lái)看一下正常的placeholder屬性樣式：

<input type="text" placeholder="正常的樣式">

效果圖：

在這里插入圖片描述

上面的樣式就是placeholder屬性默認(rèn)的樣式，如果我們想要突出字體，是不是想把字體顏色改變一下，接下來(lái)我們?cè)囈幌掳炎煮w顏色改為紅色，先想一下該如何設(shè)置呢？

效果圖：

在這里插入圖片描述

代碼：

第一種最簡(jiǎn)單的寫(xiě)法

在谷歌瀏覽器中使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)置placeholder屬性樣式的多種寫(xiě)法</title>
</head>
<style>
	input::placeholder{
		color:#DD5A5D;
	}       
</style>
<body>
	<input type="text" placeholder="字體顏色為紅色">
</body>
</html>

第二種寫(xiě)法

注：因?yàn)椴煌瑸g覽器的兼容性不同，所以在寫(xiě)代碼方面也會(huì)有所差別。

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;
}

注： 冒號(hào)前可寫(xiě)相對(duì)應(yīng)的input或textarea元素等，也可以省略不寫(xiě)，直接冒號(hào)開(kāi)頭。 

第三種寫(xiě)法

有種寫(xiě)法雖然是復(fù)雜了點(diǎn)，但還是要介紹一下。

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;
}

注：第三種寫(xiě)法中的text是相對(duì)應(yīng)html中的text，如果是密碼框，那么相對(duì)應(yīng)的就是password。

例如： 

html：

<input type="password" placeholder="字體顏色為紅色">

css：

input[type='password']::-webkit-input-placeholder{   /* 使用webkit內(nèi)核的瀏覽器*/
	color: #E97F81;
}

其實(shí)還有很多種方法，這有待我們?nèi)グl(fā)現(xiàn)，好了，今天就分享到這里，有疑問(wèn)的請(qǐng)留言。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論