Question

首先，我在查询问题时查看了为答案生成的答案。没有找到类似的东西。我只是在我的代码笔中处理一个奇怪的怪癖。结果我没想到。

最简单的解释方法是简单地链接到我的代码笔。 Code Pen: CSS3 Expandable Search Form

我有相同的css代码应用于两种不同类型的输入。一个是搜索输入，另一个是文本输入。为了得到类似的结果，我必须修改转换在文本输入上打开的宽度，并将其设置为95％而不是100％。

我的目标是让每个人都使用相同的过渡代码，并具有类似的过渡效果。但它不起作用。我非常感谢那些看过它并且能够帮助我的人。谢谢。 BTW我是堆栈溢出和代码笔的新手。如果我做错了什么我很抱歉。大声笑我试着寻找答案。

我尝试在这里发布代码，但我一定做错了。但是一切都在代码笔中。

Answer 1

您的搜索栏使用不同的盒子模型

box-sizing: border-box;

将其应用于其他字段，它们的行为也相同。

Answer 2

搜索字段的浏览器应用了box-sizing: border-box;

将此应用于您的其他字段，它们应该表现相同。

Answer 3

现在看一下你的Code Pen。我已经为每个人分配了课程。

我希望你能实现这个目标。