我在占位符上显示了一个图像，此图像在聚焦后隐藏。如何在聚焦后不隐藏图像的解决方案？
这是小提琴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>« 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;
}
答案 0 :(得分：1)
您正在删除CSS中焦点的背景图像：
#wrapper input:not([type="checkbox"]):focus{
background: rgba(0,255,255,1);
}
不要那样做，它会留在那里。
答案 1 :(得分：0)
只需更改背景颜色。
#wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus {
background-color: rgba(0, 0, 0, 0.55);
}