使 <input> 看起来像段落中的普通文本

Question

把代码放在这里：

 <p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>

示例： http ://codepen.io/dbugger/pen/KrAmPx

如何使段落内的输入看起来像完全正常的文本？我将它设置为 display: inline 但宽度似乎仍然固定。

原文由 Enrique Moreno Tent 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

元素从浏览器继承某些默认值。您需要“重置”所有这些以使输入元素显示为周围的文本：

 p input {
  border: none;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  padding: none;
  width: auto;
}

这是您单独使用 CSS 所能获得的最接近的结果。如果你想要一个可变宽度，你将不得不求助于 JS 而不是 CSS，因为 根据它的值调整元素远远超出了 CSS 的范围。事后修改元素，基于用户输入或由于即时效果而发生的变化，这就是 JS/jQuery 的用途。

请注意，根据您使用的浏览器（并且由于未来的浏览器可能会做一些与现在的做法完全不同的事情），此列表不一定是详尽无遗的。

---

您可以在没有 JS 的情况下以干净的方式“伪造”此效果的唯一方法是使用具有 contenteditable 属性的元素，该属性（与输入元素不同）会将用户输入存储在元素的内容中它的价值。有关此技术的示例，请参阅 此答案

尽管您不需要 JS 来获得效果，但您需要它来检索元素的内容。我可以想象的唯一过去的用途是，如果您提供一个永远不需要以编程方式处理输入或存储输入的可打印文档。

原文由 TheThirdMan 发布，翻译遵循 CC BY-SA 3.0 许可协议