[精讚] [會員登入]
730

[CSS] placeholder 屬性的CSS怎麼設定?

常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

分享此文連結 //n.sfs.tw/14816

分享連結 [CSS] placeholder 屬性的CSS怎麼設定?@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2020-12-04 08:52:08 最後編修
2020-11-19 15:19:06 By 張○○
 

自動目錄

常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

HTML

<label>姓名:
<input type="text" placeholder="王大明" />
</label>

結果

預設的樣式是淺灰色,想要修改他的樣式:

使用STYLE屬性

在標籤中的style屬性無法修改到placeholder的樣式。

 

使用CSS

/* input tag */
input::placeholder { color: yellow; }

/* textarea tag */
textarea::placeholder { color: green; }

/* all tag */
::placeholder { color: #a4dbb7; }

/* 指定CHROME, EDGE,  */
::-webkit-input-placeholder { color: grey; }

/* 指定firefoX */
::-moz-placeholder { color: yellow; }

placeholder 屬性是由 ::placeholder 選擇子(selector)來決定。

使用JQUERY/JAVASCRIPT

HTML

<input type="text" name="namae" id="namae" placeholder="王大明" />

JAVASCRIPT取值

var ph= document.getElementsByName('namae')[0].placeholder;

var ph2 = document.getElementById ("namae").placeholder;

JAVASCRIPT給值

document.getElementsByName('namae')[0].placeholder= "Some New Text";

document.getElementById ("namae").placeholder= "Some New Text";

JQUERY取值

var ph3= $('#namae').attr('placeholder');

var ph4= $('input[name ="namae"]').attr('placeholder');

JQUERY給值

$('input:text').attr('placeholder','Some New Text');

$('#namae').attr('placeholder','Some New Text');

參考資料

[1] https://www.w3schools.com/csSref/sel_placeholder.asp

[2] https://css-tricks.com/almanac/selectors/p/placeholder-shown/

[3] Change placeholder text https://stackoverflow.com/questions/13506481/change-placeholder-text/13506567

 

END

你可能感興趣的文章

產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

使用Google尋找你的手機 這近發現google竟然可以用來找android的手機,而且不需要經過什麼設定或安裝軟體。

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

沒有非誰做不可的事,也沒有不可被取代的人 沒有非誰做不可的事,也沒有不可被取代的人

[HP DL380G7] 生效啟動第3,4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3,4片網卡裝完系統後找不到,難道是壞了?要怎麼辦?

安裝SPHINX支援中文 新版本的 sphinx 和舊版不同,網路上很多範例和教學是不能用的。此文是安裝和設定方法分享