Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make multi color placeholder for input controls in HTML5 and CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.32k
    Comment on it

    Hi all,

    While designing a form in html with CSS3, I came across a situation where I have to set the color of asterix sign which was a part of placeholder in textbox input type and to do that with CSS3, I used to following block of code:

    in html, we have :

    <!DOCTYPE html>
    <html>
    <head>
       <title>My Page
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="container">
            Enter Name : <input type="text" placeholder="Enter your full name"/>
        </div>
    </body>
    v/html>
    

    and in CSS we had :

    body {
        font-family: "calibri", Garamond, 'Comic Sans';
        color:white;
    }
    
    .container{    
        background-color:gray;
        padding:8px 30px;
        margin:0 auto;
        margin-top:5px !important;
        display:inline-block;
        position:absolute;
        left:27%;
    }
    input::-webkit-input-placeholder:after {
        content:'*';
        color: #007f80;
    }
    
    input:-moz-placeholder :after{ 
       content:'*';
        color: #007f80;
    }
    

 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: