How to align Placeholder Text in HTML ? - GeeksforGeeks

11 Dec, 2018
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
::placeholder
For Internet Explorer::-ms-input-placeholder
:-ms-input-placeholder
Example 1: This example describes only placeholder alignment, it does not align placeholder value.
<!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.
<!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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?