使用 CSS 更改 HTML5 輸入佔位符顏色
Jay Singh
2023年2月20日
2022年4月20日
如果你想讓你的網站或網頁在人群中脫穎而出，僅靠 HTML 程式碼是無法做到的；你需要使用 CSS 屬性對其進行樣式設定。
在 CSS 中，可以使用各種屬性和選擇器來設定 HTML5 元件的樣式並使它們更加使用者友好。在 HTML5 中，不同的 CSS 選擇器會更改文字顏色、字型、字型大小、文字對齊方式和許多其他內容。
在 HTML5 中，placeholder 屬性通過顯示示例來指導使用者正確的語法。在使用者輸入值之前，瀏覽器會指示格式。
它最常與 HTML 的 input 元素一起使用，它允許使用者提交姓名、年齡、電話號碼等資訊。本文介紹瞭如何使用 CSS 更改 HTML5 輸入的佔位符顏色。
使用 CSS 更改 HTML5 輸入佔位符顏色
在此示例中，樣式 CSS 中使用了 :: placeholder 選擇器將佔位符文字的顏色更改為橙色。我們使用 <input> 標籤來輸入文字。
它只需要字母。佔位符屬性也用於方便使用者。
示例 1：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Color</title>
<style>
::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
color:orange;
}
</style>
</head>
<body>
<p>Please enter your name</p>
<input type="text" placeholder="Text only">
</body>
</html>
在下面的示例中，我們首先使用 <form> 元素建立 HTML 表單。使用 ::placeholder 選擇器，佔位符文字的顏色會針對表單中的所有三個 <input> 元件進行修改。
示例 2：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder2</title>
</head>
<style>
::placeholder{
color: green;
}
</style>
<body>
<h2> Please fill the form</h2>
<form>
<input type="text" placeholder="Enter your name"><br>
<input type="number" placeholder="Enter your age"><br>
<input type="email" placeholder="Enter your email-id">
</form>
</body>
</html>