Today, we will learn how to customize textarea placeholder style Using CSS like font, font size, and font-weight, etc.


Different pseudo-selectors are used in different browsers such as:

  • Chrome: "-WebKit-input-placeholder"
  • Firefox: "-Moz-placeholder" 
  • IE 10+: -ms-input-placeholder ”.

#example.html


<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
        /* Chrome, Safari, Opera */
        ::-webkit-input-placeholder {
            color: red;
            font-size: 13px;
        }

        /* Firefox */
        ::-moz-placeholder {
            color: red;
            font-size: 13px;
        }

        /* IE 10+ */
        :-ms-input-placeholder {
            color: red;
            font-size: 13px;
        }
        ::placeholder {
            color: red;
            font-size: 13px;
        }
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" placeholder="Enter your mobile number">
                </div>
            </div>
        </div>
    </body>
</html>