html - CSS transitions height input element -


i new bare me.
have input element grows right when user clicks in box.

.search {    display: inline-block;    width: 20px;    -webkit-transition: .5s ease;    -moz-transition: .5s ease;    transition: .5s ease;    text-align: left;  }  .search:focus {    width: 250px;    -webkit-transition: .5s ease;    -moz-transition: .5s ease;    transition: .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 input element grows 20px 250px.
problem has nothing transitions not working :-)

the problem inputbox small in height.
whatever try won't bigger:

see fiddle

you using input type search, , won't accept height. adding -webkit-appearance:textfield; allow add padding increase height, or set height manually.


Comments

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

jquery - Clone last and append item to closest class -

c - Unrecognised emulation mode: elf_i386 on MinGW32 -