Menu Close

How to align Placeholder Text in HTML?

5
(1)

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:

Change Placeholder alignmentu

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:

Change Placeholder and text alignment

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

Posted in CSS, HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...