亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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標(biāo)簽里面，placeholder屬性主要作用是讓輸入框有個提示的顯示。 

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

我們先來看一下正常的placeholder屬性樣式：

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

效果圖：

在這里插入圖片描述

上面的樣式就是placeholder屬性默認(rèn)的樣式，如果我們想要突出字體，是不是想把字體顏色改變一下，接下來我們試一下把字體顏色改為紅色，先想一下該如何設(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元素等，也可以省略不寫，直接冒號開頭。 

第三種寫法

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

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)文章

最新評論