文本字段的背景顏色：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>