如何在使用CSS3过渡期间隐藏背景图片？

Question

我有一个转换应用于文本输入框的窗体。其中两个是“必需”字段，左侧角落有一颗红色星星。当您单击输入框查看转换时，我希望明星消失。

我该如何做到这一点？

这是我的HTML和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;} 

那么我将如何做呢？

谢谢！

Answer 1

我已更新您的CSS部分。

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