Question

在那里，我正在尝试制作一个搜索框（.pullDown），当你关注文本框（.name）并且它应该改变下面div的大小是我试过的代码，但它只是改变了文本框大小不是div我想知道是否有人有任何建议如何使它只改变div高度我尝试尝试嵌套类但无法得到正确的结果

.pullDown{  
    height: 150px ; 
    -webkit-transition: width 1s ease, height 1s ease;  
    -moz-transition: width 1s ease, height 1s ease;  
    -o-transition: width 1s ease, height 1s ease;  
    -ms-transition: width 1s ease, height 1s ease;  
    transition: width 1s ease, height 1s ease; ;
}
.name:focus, .pullDown{ 
    display:block;
    height:276px !important; 

}

非常感谢你的帮助附：我正在寻找一种只有在可能的情况下才能做到这一点的方法

Answer 1

根据你的小提琴，我发现有一些错误需要正确处理。

首先，更改元素的display值与读取元素的结果相同，为什么不会触发任何转换。要解决此问题，您需要确保input在焦点之前和之后都具有相同的显示值（例如，在这种情况下为block）。

其次，您要将过渡添加到容器div，而不是要更改高度的实际输入元素。如果这是您所假设的，则不会继承转换。因此，您应该将转换移至.name。

第三，动画应仅应用于不同的值之间，尤其是在处理在不同浏览器之间呈现相当奇怪的输入元素时。在这种情况下，您可以将.name的高度设置为1em或类似。

最后，出于某种原因，您首先将.pullDown的高度设置为150px，但之后您会立即将其覆盖为276px。如果你希望div在字段聚焦时改变大小，这不是这样做的方式（实际上，目前无法用CSS选择元素的父级）。逗号分隔的选择器完全相互分离。解决此问题的方法是将height属性替换为min-height。这将确保div扩展到适合表单，如果它变得大于div。

Here's a fiddle to help you out

希望这会有所帮助！

Answer 2

那么您要做的是在选择文本框时更改height的{{1}}，这是文本框的父元素？

不可否认这是不可能的。 Css不支持父选择。你可以用javascript / jQuery做到这一点，所以当textarea聚焦时你改变了.search的{{1}}。

<强> jQuery example

如何通过关注文本框类CSS3为搜索框长度设置动画？

2 个答案: