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:
:-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:
leave a comment
0 Comments