Input Placeholder attribute specifies a short hint to describe the expected value of an 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 on the 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: use ::placeholder
For Internet Explorer: use :-ms-input-placeholder
Example 1: This example describes only placeholder alignment, it does not align placeholder value.
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder alignmentu</title>
<style>
.body-section{text-align:center;padding: 20px;width: 80%;margin: 0 auto;padding: 20px;background: #ddd;}
.body-section h1 {color:#5042e0; }
.body-section input[type="text"]::placeholder {text-align: left; }
.body-section input[type="text"]:-ms-input-placeholder {text-align: left; }
.body-section input[type="email"]::placeholder { text-align: center;}
.body-section input[type="email"]:-ms-input-placeholder {text-align: center;}
.body-section input[type="tel"]::placeholder {text-align: right;}
.body-section input[type="tel"]:-ms-input-placeholder {text-align: right; }
</style>
</head>
<body>
<div class="body-section">
<h3>Placeholder Text Alignment</h3>
<p>Left Aligned : <input type="text" placeholder="Name"></p><br>
<p>Center Aligned : <input type="email" placeholder="Email"></p><br>
<p>Right Aligned : <input type="tel" placeholder="Phone Number"></p>
</div>
</body>
</html>
Output 1:
Placeholder Text Alignment
Left Aligned :
Center Aligned :
Right Aligned :
Example 1: This example describes the placeholder and placeholder value align.
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder and text alignment</title>
<style>
.body-section {text-align:center;padding: 20px;width:80%;margin: 0 auto;padding: 20px;background: #ddd;}
.body-section h1 {color:#5042e0; }
.body-section input[type="text"]{text-align: left; }
.body-section input[type="email"]{ text-align: center;}
.body-section input[type="tel"]{text-align: right;}
</style>
</head>
<body>
<div class="body-section">
<h3>Placeholder and Value Text Alignment</h3>
<p>Left Aligned : <input type="text" placeholder="Name"></p><br>
<p>Center Aligned : <input type="email" placeholder="Email"></p><br>
<p>Right Aligned : <input type="tel" placeholder="Phone Number"></p>
</div>
</body>
</html>
Output 1:
Placeholder and Value Text Alignment
Left Aligned :
Center Aligned :
Right Aligned :
How useful was this post?
Click on a star to rate it!
Average rating 5 / 5. Vote count: 1
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?
Share