CSS transitions height input element

Question

I have a input element that grows to the right when a user clicks in the box.

 .search { display: inline-block; width: 20px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-align: left; } .search:focus { width: 250px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-align: left; } 

 <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <input class="search" type="search" value="" name="s" id="s"> </form> 

The idea is that the input element grows from 20px to 250px. The problem has nothing to do with the transitions not working :-)

The problem is that the inputbox is very small in height. Whatever I try it just won't get bigger:

See a Fiddle

Answer 1

You are using input type search , and it won't accept height. But adding -webkit-appearance:textfield; would allow you to add padding to increase height, or set height manually.

Answer 2

Added height:100px to the .search and it grew bigger for me.

Fiddle

.search {
    display:inline-block;
    width: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    text-align:left;
    height:100px;
}

Hope this helps!

EDIT

Working code snippet

 .search { display: inline-block; width: 20px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-align: left; height:100px; } .search:focus { width: 250px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-align: left; } 

 <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <input class="search" type="search" value="" name="s" id="s"> </form> 

Answer 3

You can use the line-height to set the input height:

EDIT: @wellagain answer is the right one, there is a bug with chrome and search input.

 .search { -webkit-appearance: textfield; width: 20px; line-height: 50px; transition: all .5s ease; text-align: left; } .search:focus { width: 250px; } 

 <form> <input class="search" type="search"> </form> 

I also simplified your example.

1. Vendor prefixes for transitions are not really needed now. You can use caniuse as reference.
2. Focus styles inherit rules from the default styles. So you just need to define the properties that actually change.