Html 仅使用css扩展输入框

我正在尝试创建一个搜索输入框，当聚焦时它会向左扩展，就像谷歌的移动网站一样。我正在尝试仅使用css来执行此操作

在Safari（mac/iOS）中未聚焦时的搜索框。左边的空白处是公司标志。请注意，输入文本框和搜索按钮之间没有空格。 输入框有

位置：绝对，左：120px，右：80px

聚焦时搜索框。我在

input:focus

上将输入框的

左侧更改为
0


不关注Firefox时的搜索框。绝对位置值冲突导致Chrome/Firefox上的输入文本框和按钮之间出现空白


我怎样才能只使用css创建这样一个左扩展输入框，而不为
宽度指定常量值

这里有一个

这是代码


标题{
填充：0；
}
输入[type='text']{
左：120px；
位置：绝对位置；
右：77px；
排名：0；
过渡时间：100ms；
}
输入[type='text']：焦点{
左：0；
过渡时间：300ms；
}
输入[type='submit']{
背景：1352ec；
颜色：#fff；
位置：绝对位置；
右：0；
排名：0；
宽度：80px；
}

CSS


我希望这就是你想要的

你做错的事是

Left
属性只会帮助您移动长方体，而不会展开长方体
left
和
right
这两个属性都在文本框上使用，因此它在搜索按钮和文本框之间创建了一个空间，应该使用其中一个属性将其放置在正确的位置，在您的情况下
right
属性更适合
要增加文本框的大小，请使用
width
属性
在大多数浏览器中，通过
右
和
左
设置输入的宽度似乎有点问题

为了使这项工作，我们需要使用一些可怕的黑客

第一种方法是将输入包装在
.wrapper
div中。然后将输入的宽度设为100%，并为包装提供绝对位置和左右值。这将根据您的问题使输入的初始大小正确

第二个技巧是针对何时：集中输入。CSS还不允许我们根据子对象是否集中来设计包装器。为了避免这种情况，我们可以将子输入作为目标，并使其故意溢出包装器。此处允许我们指定溢出的确切数量。如果这在浏览器上不起作用，在这里使用
110%
也可以

.wrapper input:hover {
  width: calc( 100% + 30px );
}

演示

.wrapper{
位置：绝对位置；
右：100px；
左：10px；
}
.包装器输入{
背景：绿色；
宽度：100%；
过渡：所有1000ms；
}
.wrapper输入：焦点{
宽度：计算（100%+50px）；
}
我建议使用CSS
表格
，请参见以下演示。注意，我在每个
周围添加了一个
，用于设置
表格单元格

使用
表格单元格
的好处是：我们可以将一个单元格设置为100%宽度（用于输入框），而另一个单元格将获得最小宽度，以自动适应内部内容（用于按钮）


表单{
显示：表格；
宽度：100%；
}
跨度{
显示：表格单元格；
文本对齐：右对齐；
}
跨度：第一个孩子{
宽度：100%；
}
输入[type='text']{
框大小：边框框；
-webkit过渡：宽度1s；
-moz过渡：宽度1s；
过渡：宽度1s；
宽度：50%；
高度：30px；
}
输入[type='text']：焦点{
宽度：100%；
}
输入[type='submit']{
背景：1352ec；
背景：-webkit线性梯度（顶部，#4685f9 0%，#1659e1 100%）；
背景：-莫兹线性梯度（顶部，#4685f9 0%，#1659e1 100%）；
背景：线性梯度（顶部，#4685f9 0%，#1659e1 100%）；
颜色：#fff；
边界半径：0；
边界：0；
宽度：80px；
高度：30px；
}

在
输入[type='text']
类中，您需要添加
宽度：300px和
webkit转换：宽度300ms；/*对于Safari 3.1至6.0*/过渡：宽度300ms
以使转换工作正常。@KawineshSK-是，为宽度指定一个常量将有助于找到原因，但我正在为移动站点创建此搜索框。因此，我只能使用百分比。在我的情况下，使用JoshWillik建议的宽度更合适。@vikkun在这种情况下，在
%
值中使用宽度，不要像这样使用
px
，输入集的宽度为50%。然而，随着一个固定大小的徽标出现在输入框的左侧，我将始终在徽标和输入之间留下一些空白。演示：HI@vikkun我更新了答案，添加了一个可能的解决方案，其中包括徽标，这里的演示-我自己首先使用了“calc”功能，但是浏览器对calc的支持让我改变了主意。我打算用你建议的代码再做一次尝试。虽然这不完全符合我的需要，但使用
width
和
calc（）
的百分比是正确的方法。不过，需要记住浏览器支持。
.wrapper input:hover {
  width: calc( 100% + 30px );
}