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;将允许您添加填充以增加高度，或手动设置高度。

Answer 2

将height:100px添加到.search，它对我来说变得越来越大。

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;
}

希望这有帮助！

修改

工作代码段

＆＃13;
＆＃13;
.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; }
＆＃13;
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <input class="search" type="search" value="" name="s" id="s"> </form>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以使用line-height设置输入高度：

编辑： @wellagain答案是正确答案，Chrome和搜索输入存在错误。

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

我也简化了你的例子。

现在并不真正需要转换的供应商前缀。您可以使用caniuse作为参考。
焦点样式从默认样式继承规则。所以你只需要定义实际改变的属性。

CSS转换高度输入元素

3 个答案: