当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to hide a background image during transition with CSS3?

问题描述:

I have a form with transitions applied to the text input box. Two of which are "required" fields with a red star in the left hand corner. When you click the input box to see the transformation I want the star to vanish.

How do I achieve this?

Here is my HTML and CSS:

<form action="process.php">

<h1>Registration</h1>

<ol>

<li>

<label for="name">Name:</label>

<input type="text" id="name" name="name">

</li>

<li>

<label for="email">Email:</label>

<input class="required" type="text" id="email" name="email">

</li>

<li>

<label for="pass">Password:</label>

<input class="required" type="password" id="pass" name="pass">

</li>

<li>

<input type="submit" value="Register">

</li>

input {

width: 200px;

border: 1px solid black;

border-bottom-right-radius: 5px;

border-top-right-radius: 5px;

white-space: 7px;

color: black;

padding-left: 20px;

-webkit-transition: width .5s; /* Safari */

transition: width .5s;

}

input:focus {

height: 30px;

color:#060;

border-radius: 5px;

-webkit-box-shadow: 1px 0px 3px 6px rgba(0,0,96,0.41);

-moz-box-shadow: 1px 0px 3px 6px rgba(0,0,96,0.41);

box-shadow: 1px 0px 3px 6px rgba(0,0,96,0.41);

-webkit-box-shadow: inset 1px 0px 3px 6px rgba(0,0,96,0.41);

-moz-box-shadow: inset 1px 0px 3px 6px rgba(0,0,96,0.41);

box-shadow: inset 1px 0px 3px 6px rgba(0,0,96,0.41);

width: 250px;}

.required{

border: 1px solid red;

background-image: url(star.gif);

background-repeat: no-repeat;}

So how would I go about it?

Thanks!

网友答案:

I have updated your CSS part.

View this: http://jsfiddle.net/pt3s8nap/

分享给朋友:
您可能感兴趣的文章:
随机阅读: