Skip to main content

How to align Placeholder Text in HTML ?

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 alignment | Codewithanbu</title> 

        <style> 

            body {text-align:center;padding: 20px;} 

            .body-section{width: 20%;margin: 0 auto;padding: 20px;background: #ddd;}

            h1 {color:#5042e0; } 

            input[type="text"]::placeholder {text-align: left; }

            input[type="text"]:-ms-input-placeholder {text-align: left; }  

            input[type="email"]::placeholder { text-align: center;} 

            input[type="email"]:-ms-input-placeholder {text-align: center;}

            input[type="tel"]::placeholder {text-align: right;} 

            input[type="tel"]:-ms-input-placeholder {text-align: right; }             

        </style> 

    </head> 

    <body> 

        <div class="body-section">

            <h1>CodeWithAnbu</h1> 

            <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

 

Example 2: This example describes the placeholder and placeholder value align.

<!DOCTYPE html> 

<html> 

    <head> 

        <title>Change Placeholder and text alignment | Codewithanbu</title> 

        <style> 

            body {text-align:center;padding: 20px;} 

            .body-section{width: 20%;margin: 0 auto;padding: 20px;background: #ddd;}

            h1 {color:#5042e0; } 

            input[type="text"]{text-align: left; } 

            input[type="email"]{ text-align: center;} 

            input[type="tel"]{text-align: right;}             

        </style> 

    </head> 

    <body> 

        <div class="body-section">

            <h1>CodeWithAnbu</h1> 

            <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

Comments

Popular posts from this blog

How to get form data using JavaScript / jQuery?

The serializeArray() method creates an array of objects (name and value) by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. Syntax: $(selector).serializeArray() Example Code: Here I have added two variations for output results(With and Without labels).  <!DOCTYPE html> <html>     <head>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>         <script>             $(document).ready(function(){                 $("#serialize").click(function(){                     var x = $("form").serializeAr...

Text Align Property in CSS

  The text-align property in CSS is used to make the horizontal alignment of text in an element. Property Value: The text-align property value are listed below: S.No Property Value Syntex Description 1 left text-align:left; Used to align the text-alignment into left. 2 center text-align:center; Used to align the text-alignment into center. 3 right text-align:right; Used to align the text-alignment into right. 4 justify text-align:justify; Used to stretch the content of an element to display the same width of each line 5 initial text-align:initial; Used to set its default value. 6 inherit text-align:inherit; Used to be inherited from its parent.