Showing images in placeholder on focus


Tags: html,css,placeholder

Problem :

I have an image displayed on placeholder and this image hide after focusing it. How it can be done the solution for not to hide the image after focusing?

Here is fiddle https://jsfiddle.net/Catchamouse/8bq8eoke/2/

html

    <title>Login and Registration Form with HTML5 and CSS3</title>


    <body>
        <div class="container">
            <!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="">
                    <strong>&laquo; Previous Demo: </strong>Responsive Content Navigator
                </a>
                <span class="right">
                    <a href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
            <header>
                <h1>Login and Registration Form <span>with HTML5 and CSS3</span></h1>
                <nav class="codrops-demos">
                    <span>Click <strong>"Join us"</strong> to see the form switch</span>
                    <a href="index.html" class="current-demo">Demo 1</a>
                    <a href="index2.html">Demo 2</a>
                    <a href="index3.html">Demo 3</a>
                </nav>
            </header>
            <section>               
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form  action="mysuperscript.php" autocomplete="on"> 
                                <h1>Log in</h1> 
                                <p> 
                                    <label for="username" class="uname">Your email or username </label>
                                    <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd"> Your password </label>
                                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                <p class="keeplogin"> 
                                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                                    <label for="loginkeeping">Keep me logged in</label>
                                </p>
                                <p class="login button"> 
                                    <input type="submit" value="Login" /> 
                                </p>
                                <p class="change_link">
                                    Not a member yet ?
                                    <a href="#toregister" class="to_register">Join us</a>
                                </p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form  action="mysuperscript.php" autocomplete="on"> 
                                <h1> Sign up </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="signin button"> 
                                    <input type="submit" value="Sign up"/> 
                                </p>
                                <p class="change_link">  
                                    Already a member ?
                                    <a href="#tologin" class="to_register"> Go and log in </a>
                                </p>
                            </form>
                        </div>

                    </div>
                </div>  
            </section>
        </div>
    </body>
</html>

css

/* remove codrops styles and reset the whole thing */
#container_demo{
     text-align: left;
     margin: 0;
     padding: 0;
     margin: 0 auto;
     font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
}

/** fonts used for the icons **/ 
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FranchiseRegular';
    src: url('fonts/franchise-bold-webfont.eot');
    src: url('fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/franchise-bold-webfont.woff') format('woff'),
         url('fonts/franchise-bold-webfont.ttf') format('truetype'),
         url('fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
a.hiddenanchor{
    display: none;
}
/** The wrapper that will contain our two forms **/
#wrapper{
    width: 60%;
    right: 0px;
    min-height: 560px;  
    margin: 0px auto;   
    width: 500px;
    position: relative; 
}
/**** Styling the form elements **/

/**** general text styling ****/
#wrapper a{
    color: rgb(95, 155, 198);
    text-decoration: underline;
}

#wrapper h1{
    font-size: 48px;
    color: rgba(255,255,255,1);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
    background: -webkit-repeating-linear-gradient(-45deg, 
    rgb(18, 83, 93) , 
    rgb(18, 83, 93) 20px, 
    rgb(64, 111, 118) 20px, 
    rgb(64, 111, 118) 40px, 
    rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
#wrapper h1:after{
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background: -moz-linear-gradient(left, rgba(0,100,255,0) 0%, rgba(0,100,255,0.8) 20%, rgba(0,100,255,1) 53%, rgba(0,100,255,0.8) 79%, rgba(0,100,255,0) 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,184,189,0)), color-stop(20%,rgba(147,184,189,0.8)), color-stop(53%,rgba(147,184,189,1)), color-stop(79%,rgba(147,184,189,0.8)), color-stop(100%,rgba(147,184,189,0))); 
    background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
    background: -o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
    background: -ms-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
    background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
}

#wrapper p{
    margin-bottom:15px;
}
#wrapper p:first-child{
    margin: 0px;
}
#wrapper label{
    color: rgba(255,255,255,1);
    position: relative;
}

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  { 
    color: rgb(190, 188, 188); 
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ 
    color: rgb(190, 188, 188);
    font-style: italic;
} 
input {
  outline: none;
}

/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;    
    border: 1px solid rgb(178, 178, 178);
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
      -moz-box-sizing : content-box;
           box-sizing : content-box;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
       -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
    border: 1px solid rgba(0,100,255,0.7);
    background: rgba(0,255,255,1);  
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
       -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 

/** the magic icon trick ! **/
    [data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}

/*styling both submit buttons */
#wrapper p.button input{
    width: 30%;
    cursor: pointer;    
    background: rgba(0,50,200,1);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;    
    border: 1px solid rgba(255,255,255,1);  
    margin-bottom: 10px;    
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px; 

    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}
#wrapper p.button input:hover{
    background: rgba(0,100,255,1);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgba(0,255,255,1);
    position: relative;
    top: 1px;
    border: 1px solid rgba(255,255,255,1);  

}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 5px 0;
}


/* styling the checkbox "keep me logged in"*/
.keeplogin{
    margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
    display: inline-block;
    font-size: 12px;    
    font-style: italic;
}
.keeplogin input#loginkeeping{
    margin-right: 5px;
}
.keeplogin label{
    width: 80%;
}


/*styling the links to change from one form to another */

p.change_link{
    position: absolute;
    color: rgb(127, 124, 124);
    left: 0px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px ;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    -webkit-border-radius: 0 0  5px 5px;
       -moz-border-radius: 0 0  5px 5px;
            border-radius: 0 0  5px 5px;
    background: rgb(225, 234, 235);
    background: -moz-repeating-linear-gradient(-45deg, 
    rgb(247, 247, 247) , 
    rgb(247, 247, 247) 15px, 
    rgb(225, 234, 235) 15px, 
    rgb(225, 234, 235) 30px, 
    rgb(247, 247, 247) 30px
    );
    background: -webkit-repeating-linear-gradient(-45deg, 
    rgb(247, 247, 247) , 
    rgb(247, 247, 247) 15px, 
    rgb(225, 234, 235) 15px, 
    rgb(225, 234, 235) 30px, 
    rgb(247, 247, 247) 30px
    );
    background: -o-repeating-linear-gradient(-45deg, 
    rgb(247, 247, 247) , 
    rgb(247, 247, 247) 15px, 
    rgb(225, 234, 235) 15px, 
    rgb(225, 234, 235) 30px, 
    rgb(247, 247, 247) 30px
    );
    background: repeating-linear-gradient(-45deg, 
    rgb(247, 247, 247) , 
    rgb(247, 247, 247) 15px, 
    rgb(225, 234, 235) 15px, 
    rgb(225, 234, 235) 30px, 
    rgb(247, 247, 247) 30px
    );
}
#wrapper p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s  linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s  linear;
    transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
    position: relative;
    top: 1px;
}
/** Styling both forms **/
#register, 
#login{
    position: absolute;
    top: 0px;
    width: 88%; 
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(0,0,0,1);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),  0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
       -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),  0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
            box-shadow: 0pt 2px 5px rgba(0,0,0,0.7),0px 0px 8px 5px rgba(20,20,20,0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
         border-radius: 5px;
}
#register{  
    z-index: 21;
    opacity: 0;
}
#login{
    background: rgba(0,0,80,1);
    z-index: 22;
}
#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -o-animation-delay: .1s;
    -ms-animation-delay: .1s;
    animation-delay: .1s;
}
#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
    -webkit-animation-name: fadeOutLeft;
    -moz-animation-name: fadeOutLeft;
    -ms-animation-name: fadeOutLeft;
    -o-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

/** the actual animation, credit where due : http://daneden.me/animate/ ***/
.animate{
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;

    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;

    -o-animation-duration: 0.5s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;

    -ms-animation-duration: 0.5s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;

    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

/** yerk some ugly IE fixes 'cause I know someone will ask "why does it look ugly in IE?", no matter how many warnings I will put in the article */

.lt8 #wrapper input{
    padding: 10px 5px 10px 32px;
    width: 92%;
}
.lt8 #wrapper input[type=checkbox]{
    width: 10px;
    padding: 0;
}
.lt8 #wrapper h1{
    color: #066A75;
}
.lt8 #register{ 
    display: none;
}
.lt8 p.change_link,
.ie9 p.change_link{
    position: absolute;
    height: 90px;
    background: transparent;
}

input#username
{
background-image: url('http://s6.postimg.org/ct6blnyl9/user.png');
background-repeat: no-repeat;
background-position:5px 5px;        
text-indent: 0px;
}

input#password
{
background-image: url('http://s6.postimg.org/3mo0ydtct/password.png');
background-repeat: no-repeat;
background-position:5px 5px;        
text-indent: 0px;
}


Solution :

Just change the background color.

#wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus {
    background-color: rgba(0, 0, 0, 0.55);
}

    CSS Howto..

    How to change CSS when it's ng-disabled?

    How do I get my links to glow on :hover with CSS3? [duplicate]

    How to set CSS width so that the element will have the exact window width?

    Adding a description to a css image slideshow

    How to alter hover effects for image button and embedded text?

    How can we create custom style for Jquery-ui dialog window in PHP?

    how to get fixed header with css?

    How to make
  • expand with CSS (like Apple.com)
  • How to create an opacity fade()? ( improvement over jQuery)

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    How to use not css selector with * in stylesheet

    CSS: How to display image icon before each h3 in CSS?

    How to make a svg-filled background go animating by pure CSS?

    How to link css to html in an express project?

    How to inspect value both in Mozilla Firebug?

    How to remove floats so items don't wrap with CSS only in this Codepen

    How to draw a line with css and show text or image on it

    How to make a CSS/javascript feature like this website? [closed]

    How to add left border with image(s) dynamically

    How to use css in one page only?

    how to apply jquery ui/css to forum field

    How can i make an arrow triangle using CSS without any cut in the side i.e. smooth sides?

    How to keep block elements inline and also correctly centered?

    How to design WPF in HTML, CSS and JavaScript

    How to center text with CSS?

    How can I toggle a div to reveal content with CSS

    HTML/CSS slideshow without javascript

    How to move an image upwards in html/css

    How to display form output in the same page by hiding the form

    How can a site Use Javascript and NOT display any structural HTML in the browser?