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 create this layout using CSS

    How to create flexible div items that break after the line?

    How to reverse a CSS animation on unchecked state?

    How do I align 2 divs (each has its own padding) next to each other?

    How to stick to bottom on layout by using CSS?

    How to highlight the menu item in menu

    how to bind newly created html element to its css

    How to create icons like font awesome

    How do you fade horizontal text into a vertical gradient?

    How do I format text to wrap onto a second line using bootstrap?

    Getting an class to show when item is clicked

    How to position and style blockquote in css

    How To Select Two classes with CSS?

    How can I align the tops of two paragraphs in this example without resorting to an empty header? (e.g.,

     

    )

    How to override active admin CSS?

    How to target a group of long similar CSS selectors on one line?

    How to apply jQuery on css selector :before [duplicate]

    How to set style class to another class depends on selector?

    How to create a header that changes as you scroll down the page? [duplicate]

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    How to achieve multiple icon hover transitions over one image

    Base 64 CSS background image not showing in IE

    How to get rid of css inherited from a css file?

    How to Use jquery Animate() with .slideToggle() Between Two Classes

    How to apply css to iframe content? [closed]

    How to hide element using Class; instead of using css function in JQuery? [closed]

    How to add multiple css rules at once through Dev-Tools or Firebug

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    How to construct multilevel menu using CSS only?

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?