转换输入宽度答案

【问题标题】：Transition input width转换输入宽度
【发布时间】：2020-09-01 05:14:35
【问题描述】：

我有输入搜索字段。当我点击它时，我需要它变得更宽，执行从右到左的平滑过渡，即输入位于页面的右侧，当我点击它时，它应该以一定数量的像素向左拉伸并变成更宽的。

这是我的 CSS：

#header #search input {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 178px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;

}
#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;

你能帮我实现吗？

【问题讨论】：

您的 css 应该可以工作，但我不会在您的 :focus 选择器中复制任何内容。所以里面应该是你的宽度变化。其余的，因为它已经在您的“正常”选择器中。只有发生变化的东西才应该放在焦点选择器中。另请注意，您的标头和搜索是 id (#) 而不是类 (.) 所以请确保您的输入位于 I'd 的标头中，该标头有一个子项，而 Id 搜索本身有一个子项输入

标签： html css css-transitions

【解决方案1】：

input[type="search"] {
  background: #FFF;
  padding: .5rem 1rem;
  position: relative;
  top: 0;
  left: 0;
  width: 178px;
  height: 40px;
  outline: none;
  border: 1px solid #CCCCCC;
  border-radius: 6px;
  transition: all .5s;
}

input[type="search"]:focus {
  width: 300px;
  top: 0;
  right: 100%;
}

<div style="text-align:right;">
  <input type="search" id="search" />
</div>

【讨论】：

【解决方案2】：

绝对定位输入并将右属性设置为零：

position:absolute;
right:0;

这会在聚焦时强制向左扩展。

jsFiddle example

【讨论】：

【解决方案3】：

使用 position: relative 使您的容器偏移父级。

#header, #search {
    width: 100%;
    position: relative;
}

然后使用 position: absolute 定位您的输入并使用 right 放置它。

#header #search input {
    position: absolute;
    right: 0px;
    background: #FFF;
    padding: 1px 1px 1px 5px;
    width: 178px;
    height: 21px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;

您的动画现在将向左拉伸。

【讨论】：