文本字段的背景颜色：focus

Question

我尝试制作漂亮的文本字段，并且我希望用户单击它以更改背景颜色。但我想要从左到右缓慢地背景彩色幻灯片。 是wordpress的联系方式，但是我认为没关系。

所以我什么，我在我的CSS：

.brtel { 
-webkit-transition: width 0.4s ease-in-out; 
transition: width 0.4s ease-in-out; 
width: 50px; 
} 
.brtel:focus { 
border-radius: 0px; 
border:none; 
background:#797d7e; 
color: #fff; 
width: 200px; 
} 

我可以修复它在CSS或我应该使用JS？

Answer 1

您可以使用jQuery的短代码，这样

$('.animate').mouseenter(function() { 
    $(this).addClass('filled'); 
}).mouseout(function() { 
    $(this).removeClass('filled') 
}) 

而且通过CSS

.animate{ 
    display: inline-block; 
    height: auto!important; 
    width: 200px; 
    background: #bbb; 
    position: relative; 
} 

.animate:before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    background: red; 
    width: 0; 
    transition: all .5s ease; 

} 
.animate.filled:before{ 
    width: 100%; 
} 
input { 
-webkit-transition: width 0.4s ease-in-out; 
transition: width 0.4s ease-in-out; 
width: 100%; 
    -webkit-appearance: none; 
    appearance: none; 
    background: none; 
    border: none; 
} 

HTML操纵filled类：

<form> 
    <div class="animate"><input value="Send" type="submit" class="brtel"></div> 
</form> 

选中此笔：http://codepen.io/todorutandrei/pen/MeKQze

Answer 2

我添加了一个过渡元素类，你可以在这里https://jsfiddle.net/giuseppe_straziota/dngb5bz2/

transition: width 0.4s ease-in-out, background-color 1.5s ease; 
background-color: white; 

看到它，它使从白色背景转换为灰色，我希望这是你想要的是什么。

Answer 3

你可以在纯css中做到这一点，但你需要一个图像与你想要的颜色作为背景。

.brtel { 
    -webkit-transition: background-size 4s ease-in; 
    transition: background-size 4s ease-in; 
    width: 200px; 
    background-image: url('http://i.imgur.com/9HMnxKs.png'); 
    background-repeat: repeat-y; 
    background-size: 0% 0%; 
} 
.brtel:focus { 
    border-radius: 0px; 
    border:none; 
    color: #fff; 
    background-size: 100% 100%; 
}  

看到这个小提琴：https://jsfiddle.net/ym7joe4L/

编辑：拼写

Answer 4

你可以只用CSS实现这一目标。

<form> 
<button type="submit" class="brtel">Send</button> 
</form> 

.brtel { 
    position: relative; 
} 

.brtel:before { 
    position:absolute; 
    width: 0; 
    height: 50px; /* height if input field */ 
    background-color: #666; 
    display: block; 
    transition: width .5s ease; 
} 

.brtel:hover:after { 
    width: 100%; 
} 

Answer 5

您只能通过CSS实现它。

请检查以下代码。

.brtel { 
       width: 150px; 
      } 
      .brtel:focus { 
       border-radius: 0px; 
       border:none; 
       background:#797d7e; 
       color: #fff; 
       animation: equalize .4s 0s 1; 
      } 
    @keyframes equalize { 
     0% { 
     width: 10px; 
     } 
     10% { 
     width: 20px; 
     } 
     20% { 
     width: 30px; 
     } 
     30% { 
     width: 40px; 
     } 
     40% { 
     width: 50px; 
     } 
     50% { 
     width: 60px; 
     } 
     60% { 
     width: 70px; 
     } 
     70% { 
     width: 80px; 
     } 
     80% { 
     width: 90px; 
     } 
     90% { 
     width: 100px;; 
     } 
     100% { 
     width: 100px; 
     } 
    } 
<form id="formoid" action="/" title="" method="post"> 
      <div> 
       <label class="title">First Name</label> 
       <input type="text" id="name" name="name" class="brtel"> 
      </div> 
     </form>