CODEWITHSUNDEEP
htmlcss
Interactive
Interactive

Reputation: 1560

CSS transitions height input element

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

Upvotes: 0

Views: 502

Answers (3)

tzi
tzi

Reputation: 9489

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.

Upvotes: 1

Mike Donkers
Mike Donkers

Reputation: 3699

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>

Upvotes: 1

wellagain
wellagain

Reputation: 409

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.

Upvotes: 4

Related Questions