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

Question

拿这里的代码:

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

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

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来获得效果,但您需要它来检索元素的内容.我能想象的唯一用途是,如果您提供的打印文档永远不需要以编程方式处理输入或存储它.