[精讚] [會員登入]
48

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

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

此文完整連結 http://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

 

你可能感興趣的文章

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

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

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

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

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[jQuery] select 元件的取值及給值 html中的元件select,在jquery中要如何使用?

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做?

為什麼要重造輪子? 什麼輪子?造什麼輪子?我為什麼要重造輪子?

[CodeIgniter3] 解決無法上傳特定檔案(.sb2)的問題 上傳時出現The filetype you are attempting to upload is not allowed,要怎麼解決?