The placeholder attribute specifies a short hint that describes the expected value of a input field / textarea. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned in left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser. For example:
- For Chrome, Mozilla, and Opera Browsers:
::placeholder
- For Internet Explorer and Microsoft Edge:
:-ms-input-placeholder
Example 1: This example describes only placeholder alignment, it does not align placeholder value.
html
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder alignment</title>
<style>
input[type="email"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: center;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: right;
}
input[type="tel"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="email"]:-ms-input-placeholder {
/* Internet Explorer 10-11 */
text-align: center;
}
input[type="email"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: center;
}
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Placeholder Text Alignment</h3>
<p>
Center Aligned<br>
<input type="email"
placeholder="Email">
</p>
<br>
<p>
Right Aligned<br>
<input type="text"
placeholder="Name">
</p>
<br>
<p>
Left Aligned<br>
<input type="tel"
placeholder="Phone Number">
</p>
</body>
</html>
|
Output: 
Example 2: This example describes the placeholder and placeholder value align.
html
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder alignment</title>
<style>
input[type="email"]{
text-align: center;
}
input[type="text"] {
text-align: right;
}
input[type="tel"] {
text-align: left;
}
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Placeholder Text Alignment</h3>
<p>
Center Aligned<br>
<input type="email"
placeholder="Email">
</p><br>
<p>
Right Aligned<br>
<input type="text"
placeholder="Name">
</p><br>
<p>
Left Aligned<br>
<input type="tel"
placeholder="Phone Number">
</p>
</body>
</html>
|
Output: 
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Aug, 2023
Like Article
Save Article