如何将输入样式设置为看起来与标签完全相同?

Question

我正在开发 React 应用程序，您可以在其中内联编辑内容。我正在从某个标签(h1-h6或p(切换到单击句子时的input(不，内容可编辑不起作用(

有没有一种简单的方法可以使无缝切换？也就是说，要使输入中的文本样式与 html 标记对应项完全相同？

我尝试了normalize.css没有运气，我仍然可以看到开关更改样式。有没有更好的选择？

目前我有这个 CSS(我仍在尝试重置样式表(：

.tag {
letter-spacing: 1px;
padding: 0;
border: 0;
line-height: 10px;
}
.heading {
font-weight: bold;
}
.h1 {
font-size: 32px;
}
.h2 {
font-size: 28px;
}
.h3 {
font-size: 24px;
}
.h4 {
font-size: 20px;
}
.h5 {
font-size: 18px;
}
.h6 {
font-size: 16px;
}
.p {
font-size: 14px;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
input {
width: 100%;
font-family: Arial;
}

<h1 class="h1 heading tag">Heading text</h1>
<input class="h1 heading tag" value="Heading text"/>
<p class="p tag">Paragraph text</p>
<input class="p tag" value="Paragraph text"/>

Answer 1

尝试在span/div中使用自定义样式而不是h1。这是一些额外的工作，但更容易实现相同的样式，因为您可以完全控制所有应用的样式属性，其中使用h1标签，浏览器已经应用了一些样式，因此您必须匹配输入组件中的所有样式，更不用说可能存在一些跨浏览器问题。