html - CSS 过渡高度输入元素

Question

我有一个输入元素，当用户在框中单击时，它会向右增长。

.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>

想法是输入元素从 20px 增长到 250px。该问题与无法正常工作的过渡无关:-)

问题是输入框的高度非常小。无论我尝试什么，它都不会变大:

查看 Fiddle

Answer 1

您正在使用输入类型 search，它不接受高度。 但是添加 -webkit-appearance:textfield; 将允许您添加填充以增加高度，或手动设置高度。