CSS Placeholder Fonts
CSS Placeholder Font
In web development,
In this article, we’ll explore how to use CSS to customize the font style of placeholder text. By changing the size, color, and font type of the placeholder text, you can make the input field more beautiful and personalized.
Modify Placeholder font size
To modify The font size of the placeholder text can be changed using the ::placeholder pseudo-class selector. By setting the font-size property, the size of the placeholder text can be changed. Here is a sample code:
<!DOCTYPE html>
<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>Custom Placeholder Font Size</title>
<style>
::placeholder {
font-size: 16px;
}
input {
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
In the code above, we use the ::placeholder pseudo-class selector to set the placeholder text font size to 16 pixels. After running the code, the placeholder text in the input box will be displayed according to the specified size.
Change Placeholder Font Color
In addition to changing the font size, we can also change the color of the placeholder text using the color attribute. Here is a sample code:
<!DOCTYPE html>
<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>Custom Placeholder Font Color</title>
<style>
::placeholder {
color: red;
}
input {
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your email">
</body>
</html>
In the code above, we use the ::placeholder pseudo-class selector to set the color of the placeholder text to red. After running the code, the placeholder text in the input box will appear red.
Modifying the Placeholder Font Type
Finally, we can change the font family of the placeholder text using the font-family property. Here is a sample code:
<!DOCTYPE html>
<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>Custom Placeholder Font Family</title>
<style>
::placeholder {
font-family: 'Arial', sans-serif;
}
input {
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your message">
</body>
</html>
In the code above, we use the ::placeholder pseudo-class selector to set the placeholder text’s font type to Arial. After running the code, the placeholder text in the input box will display in Arial.
Through the above code example, we can see how to use CSS to customize the font style of placeholder text. By modifying the font size, color, and font type, the placeholder text of the input box can be made more personalized and beautiful.