CODEWITHSUNDEEP
javascripthtmlcsswordpress
Milan Poznan
Milan Poznan

Reputation: 291

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?

Upvotes: 0

Views: 256

Answers (5)

San
San

Reputation: 279

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

Upvotes: 0

Nora
Nora

Reputation: 3261

You can achieve this with css only.

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

Upvotes: 0

Thargor
Thargor

Reputation: 729

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

Upvotes: 2

giuseppe straziota
giuseppe straziota

Reputation: 443

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.

Upvotes: 0

Andrei Todorut
Andrei Todorut

Reputation: 4536

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:

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

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

Upvotes: 0

Related Questions