Background Color of text field :focus

Background Color of text field :focus

I am tryig to make nice text field, and I want when user click on it to change background color. But I want to background color slide from left to the right slowly. It is contact form for wordpress, but I think it does not matter.

So i what I have in my 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;  }   

Can I fix it in CSS or should I use JS?

Answer by Andrei Todorut for Background Color of text field :focus

You can use a short code of jquery, like this

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

And manipulate the filled class by 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:

Check this pen: http://codepen.io/todorutandrei/pen/MeKQze

Answer by giuseppe straziota for Background Color of text field :focus

I've added a transition element to your class, you can see it here https://jsfiddle.net/giuseppe_straziota/dngb5bz2/

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

It make a background transition from white to grey, I hope it was what you desired.

Answer by Thargor for Background Color of text field :focus

You can do it in pure css but you need an image with the color you want as a background.

.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%;  }       

see this fiddle: https://jsfiddle.net/ym7joe4L/

Edit: spelling

Answer by Nora for Background Color of text field :focus

You can achieve this with css only.

     
    .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 by San for Background Color of text field :focus

You can achieve it by CSS only.

Please check the below code.

    .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;        }      }  
              
                  First Name                                
           
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72