使用 CSS 更改 HTML5 輸入佔位符顏色

Jay Singh 2023年2月20日 2022年4月20日
使用 CSS 更改 HTML5 輸入佔位符顏色

如果你想讓你的網站或網頁在人群中脫穎而出,僅靠 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>

相關文章 - CSS Color