解码此动态增加输入宽度的示例

时间:2016-12-07 16:20:46

标签: javascript jquery html css

我在这里以及其他网站上大量阅读有关如何根据内容动态增加输入字段宽度的信息。到目前为止,所有解决方案都只有部分工作,但我找到了一个完美运行的网站:

https://paper.fiftythree.com/search

他们甚至对如何做到这一点给出了一些模糊的指示:

http://making.fiftythree.com/fluid-text-inputs/

但我不能为我的生活找到如何在我自己的网站上实现这一点。

这是我目前的表格结构:

<form action="/" class="search-form">
  <input type="text" name="s" class="_input" placeholder="What are you looking for?">
  <button type="submit" class="_button">Search</button>
</form>

我尝试这样做的原因是整个表单下方有一个边框。然后我会喜欢输入的文字有自己的边框底部&#39;增长&#39;用不同颜色的文字。输入字段宽度较小,有自己的边框,但我的宽度仍然保持平滑的动态体验。

有人可以帮忙吗?感谢。

0 个答案:

没有答案