Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom style/CSS for HTML5 placeholder attributes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 186
    Comment on it

    Introduction of HTML5 Placeholder

    HTML5 is one of the great inventions for web world. HTML5 introduce many new and important attributes, some are HTML based and some are through JavaScript API form. HTML5 Input “Placeholder” is one of the best feature, which help us to specify the hint for inputs, after focusing the input, it disappear and given a blank area to enter the value.

    Note: Kindly note that the HTML5 placeholder attribute works with the the input types mentioned below–
    --> text,
    --> password,
    --> tel,
    --> email,
    --> search,
    --> URL

     

    In short , placeholder is an attribute which place a text as a hint to enter the value in input box. After focusing in input box, placeholder text disappears and given blank space to enter the value

    But this “input placeholder” is rigid by its nature. It's taking its own default style properties. So sometimes we have to add some extra style which overwrite the default style of Placeholder

     

    Below I provide a simple style method, by which we can give our custom style or css for any input placeholder attribute.

    Here are the code.

    input::-webkit-input-placeholder {
      color: blue;
    }
    //For Firefox less than version 18
    input:-moz-placeholder { /* Firefox 18- */
     color: blue;  
    }
     //For Firefox More than version 19
    input::-moz-placeholder {  /* Firefox 19+ */
     color: blue;  
    }
    
    input:-ms-input-placeholder {  
     color: blue;  
    }

    In above code, we provide the color to input box, because the default color of placeholder is “light grey”. So we have to add the custom color as per our template design.

     

    You can also provide your required style to placeholder. Basically placeholder has default nature related to text and the color. So you can use above code to change the default behavior of 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: