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

368yc8dk  于 2022-11-27  发布在  其他
关注(0)|答案(7)|浏览(158)

在此获取代码:

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

样品:http://codepen.io/dbugger/pen/KrAmPx
我怎样才能使输入的文本在段落中看起来完全正常呢?我将其设置为display: inline,但宽度似乎仍然是固定的。

xqnpmsa8

xqnpmsa81#

也许最好的解决方法就是把你的文本字段变成一个编辑文本字段,但使它不可编辑,这样你的文本字段和编辑文本字段看起来就一样了。

gzjq41n4

gzjq41n42#

2020更新。部分您可以使用appearance属性使其看起来像普通文本,将其设置为none。不幸的是,除了使用js将其替换为值. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance之外,您无法做太多事情来使换行。

mrfwxfqh

mrfwxfqh3#

我希望这就是您要寻找的答案,但是如果您想让输入字段看起来像一个普通的段落(假设这样您就可以编辑段落中的一些文本),最好的方法是:
1.禁用输入的边框

.maskedinput {
  border-style: none;
}

1.然后给予它与父元素相同的样式,即文本颜色和背景颜色等,然后添加一个:focus到CSS中,更改背景颜色,以便在单击字段时,它将被突出显示。

kninwzqo

kninwzqo4#

您可以使用<textarea>标记来代替<input>标记,它们的工作方式与<input>标记几乎完全相同。

<textarea name="variable" rows="4" cols="50">
Placeholder
</textarea>
ve7v8dk2

ve7v8dk25#

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

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

如果你想要一个可变的宽度,你将不得不求助于JS而不是CSS,因为将一个元素调整到它的值远远超出了CSS的范围。修改元素之后,基于用户输入或由于即时效果的变化,这是JS/jQuery的用途。
请注意,根据您使用的浏览器(并且由于未来的浏览器可能会做与现在的做法完全不同的事情),此列表不一定是详尽的。
不使用JS就能以简洁的方式“伪造”这种效果的唯一方法是使用带有contenteditable属性的元素,它(与input元素不同)将用户输入存储在元素的内容中而不是其值中。
虽然您不需要JS来获得这种效果,但您需要它来检索元素的内容。我能想象的唯一一种过去的用法是,如果您提供一个可打印的文档,它永远不需要以编程方式处理输入或存储它。

brqmpdu1

brqmpdu16#

现在看起来这是可能的。我发现了一个帖子,描述了如何对输入进行样式化,以便剥离HTML表单样式。
Styling HTML forms
他们使用了下面的CSS,对于我所尝试做的,它工作得很完美:

input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;
  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;
  background: none;
}

显然,这对原作者来说已经太晚了,但我希望其他人也能从中受益。

vnzz0bqm

vnzz0bqm7#

是的,可以通过模仿CSS的样式和使用javascript自动调整文本的长度来做到这一点。

将输入大小调整为其内容大小。

第一个

相关问题