[英]Background Color of text field :focus
我是tryig的一個不錯的文本字段,我希望當用戶單擊它來更改背景顏色時。 但是我想讓背景色從左向右緩慢滑動。 它是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?
您可以在純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/
編輯:拼寫
您可以使用jquery的簡短代碼,如下所示
$('.animate').mouseenter(function() {
$(this).addClass('filled');
}).mouseout(function() {
$(this).removeClass('filled')
})
並通過CSS操作filled
類
.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:
<form>
<div class="animate"><input value="Send" type="submit" class="brtel"></div>
</form>
我已經向您的班級添加了一個transition元素,您可以在這里看到它https://jsfiddle.net/giuseppe_straziota/dngb5bz2/
transition: width 0.4s ease-in-out, background-color 1.5s ease;
background-color: white;
它使背景從白色過渡到灰色,我希望這是您想要的。
您只能使用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%;
}
您只能通過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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.