How to make animation at input?

H

harly_queen2015-05-14 14:48:52

css

harly_queen, 2015-05-14 14:48:52

How to make it so that when you click on the input type="text" its border (when focused) increases, and then the border decreases (when not in focus)?
https://www.dropbox.com/s/y01sfnevohlou9g/Untitled...

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

L

Lumore, 2015-05-14
@Lumore

Dropbox - 403 error.
The question is incomprehensible.

E

Evgeny Konkin, 2015-05-14
@konnn

border-bottom increased on focus?

E

Eugene, 2015-05-14
@eholin

Can be done simply:

input[type="text] {
border: 1px solid #555555;
}
input[type="text]:focus {
border-width: 2px;
}

But due to the fact that we increase the height and width of the object by 1px in each direction, it will jump. Therefore, it will be correct to wrap each input in a layer, set a border of 1px of the desired color for this layer.
And for the input, set the border to 1px of the same color as the background of the input, while on focus, change the color of the border of the input. See how it looks on the form: demo.lp-tricks.com