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 2: This example describes the placeholder and placeholder value align.
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder and text alignment</title>
<style>
.body-section1 {text-align:center;padding: 20px;width:80%;margin: 0 auto;padding: 20px;background: #ddd;}
.body-section1 h1 {color:#5042e0; }
.body-section1 input[type="text"]{text-align: left; }
.body-section1 input[type="email"]{ text-align: center;}
.body-section1 input[type="tel"]{text-align: right;}
</style>
</head>
<body>
<div class="body-section1">
<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 2:
Placeholder and Value Text Alignment
Left Aligned :
Center Aligned :
Right Aligned :