html - 如何将输入样式设置为与标签完全相同？

Question

我正在开发 React 应用程序，您可以在其中内联编辑内容。当句子被点击 < em>(不，contenteditable 没有成功)

有没有一种简单的方法可以实现无缝切换？也就是说，要使输入中的文本样式与对应的 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 标签，浏览器已经应用了一些样式，因此您必须匹配输入组件中的所有这些，更不用说可能存在一些跨浏览器问题。