Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Changing the text color inputs placeholder

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 119
    Comment on it

    The placeholder attribute is a default  text inside an input box. It usually appears in light gray color. It gives a short hint  to the user describing the expected value in that  input field. This hint  appears in the field even before the user enters a value. That is, a  placeholder indicates  what type of content is expected from the user to enter. The text remains in the input field until a value has been entered by the user. As mentioned, the default color of placeholder is light grey. So to style it, we will require vendor prefixed CSS selectors.

    HTML:

    <input type="email" placeholder="Enter emailID here">
    

     CSS:

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: green;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: green;
       opacity:  1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: green;
       opacity:  1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: green;
    }
    

    OUTPUT:

    Note that, Firefox's placeholder has a  reduced opacity by default. So, there is a need to use “opacity: 1” here.

    That’s all. Happy Coding!

    Changing the text color inputs placeholder

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: