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

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标签，浏览器已经应用了一些样式，所以你有要匹配输入组件中的所有内容，更不用说可能存在一些跨浏览器问题。