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

我正在研究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"/>

來源

2017-07-12 Aurimas

只要文本標籤和'input'具有相同的屬性：'padding'，'border'，'font-size'，'line-height'，它就可以工作。請張貼您嘗試過的例子。 –

@TigranPetrossian這些都是？ – Aurimas

完成它，也使用某種形式重置。結果 - 在Chrome中點擊時會增加一點，而在Firefox中則會減少。 – Aurimas

嘗試使用內span/div，而不是h1自定義樣式。這是一些額外的工作，但可以更容易地實現相同的風格，因爲您完全控制了所有應用的樣式屬性，在h1標記處，瀏覽器已經應用了一些樣式，因此您必須匹配所有樣式輸入組件，更不用說可能會出現一些跨瀏覽器的問題。

來源

2017-07-12 00:17:46

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

回答

相關問題