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屬性樣式的多種寫(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)文章
Vue獲取子組件實(shí)例對(duì)象ref屬性的方法推薦
在Vue中我們可以使用ref屬性來(lái)獲取子組件的實(shí)例對(duì)象,這個(gè)功能非常方便,這篇文章主要給大家介紹了關(guān)于Vue獲取子組件實(shí)例對(duì)象ref屬性的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue 中常見(jiàn)的時(shí)間格式轉(zhuǎn)換
這篇文章主要介紹了vue 中常見(jiàn)的時(shí)間格式轉(zhuǎn)換,需要的朋友可以參考下2022-05-05
基于Vue3實(shí)現(xiàn)SSR(服務(wù)端渲染)功能
在現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)中,用戶體驗(yàn)日益成為網(wǎng)站成功的重要因素,從加載時(shí)間到SEO優(yōu)化,越來(lái)越多的開(kāi)發(fā)者開(kāi)始關(guān)注使用服務(wù)端渲染（SSR）來(lái)提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-11-11
vue實(shí)現(xiàn)折疊展開(kāi)收縮動(dòng)畫(huà)效果
這篇文章主要介紹了vue實(shí)現(xiàn)折疊展開(kāi)收縮動(dòng)畫(huà),通過(guò)scrollHeight實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
詳解Vue2.x-directive的學(xué)習(xí)筆記
這篇文章主要介紹了詳解Vue2.x-directive的學(xué)習(xí)筆記，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要給大家整理了在Vue開(kāi)發(fā)中整合axios要用到的文件，在vue開(kāi)發(fā)中，不可避免要整合axios，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-04-04
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無(wú)刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue跳轉(zhuǎn)方式的常見(jiàn)方式以及區(qū)別分析
在Vue.js中頁(yè)面跳轉(zhuǎn)是前端開(kāi)發(fā)中常見(jiàn)的需求,Vue提供了多種頁(yè)面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見(jiàn)方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下2024-02-02