資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS :placeholder-shown 自定義空文字輸入樣式
要自定義帶有佔位符的輸入文字框的樣式，我們使用 CSS 的 :placeholder-shown 偽類。佔位符文字是給使用者的提示，以便理解在輸入文字欄位中應該輸入什麼內容。
以下示例說明了 CSS :placeholder-shown 偽類。
設定文字欄位的邊框
文字欄位的邊框使用 border-color 屬性設定。將其放在 placeholder-shown 偽類內，如下所示：
input:placeholder-shown {
border-color: dodgerblue;
}
示例
讓我們來看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html>
設定文字欄位的背景顏色
文字欄位的背景顏色使用 background 屬性設定。將其放在 placeholder-shown 偽類內，如下所示：
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
示例
讓我們來看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
</style>
</head>
<body>
<input type="email" placeholder="Enter your email-id">
<input type="text">
</body>
</html>
轉換佔位符文字
text-transform 屬性用於轉換網頁上的佔位符文字。它可以轉換為大寫、全部大寫、全部小寫等。我們將佔位符文字更改為全部大寫。
將其放在 placeholder-shown 偽類內，如下所示：
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
示例
讓我們來看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Register</h1>
<input type="email" placeholder="Enter email-id">
<input type="text" placeholder="Enter password">
</body>
</html>
轉換佔位符文字字元之間的間距
letter-spacing 屬性用於設定佔位符文字字元之間的間距。將其放在 placeholder-shown 偽類內，如下所示：
input:placeholder-shown {
letter-spacing: 4px;
}
示例
讓我們來看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
letter-spacing: 4px;
}
</style>
</head>
<body>
<h1>Register</h1>
<input type="email" placeholder="Enter email-id">
<input type="text" placeholder="Enter password">
</body>
</html>
更新於：2024年1月2日
瀏覽量：260
廣告