如何將輸入樣式設置為與標簽完全相同？

Question

我正在開發React應用程序，您可以在其中內聯編輯內容。 單擊句子時，我從某些標簽（ h1 - h6或p ）切換為input （不，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標簽，瀏覽器已經應用了某些樣式，因此您必須匹配所有樣式。輸入組件，更不用說跨瀏覽器問題了。