CODEWITHSUNDEEP
htmlcss
Aurimas
Aurimas

Reputation: 2717

How to set input style to look exactly the same as tag?

I'm working on React application where you can edit things inline. I'm switching from some tag (h1-h6 or p) to input when the sentence is clicked (no, contenteditable didn't work out)

Is there an easy way I could make the switch seamless? That is, to make the style of text inside an input exactly the same as the html tag counterpart?

I tried normalize.css with no luck, I can still see the switch change styles. Is there a better alternative?

Currently I have this CSS (I am still trying out the reset stylesheets):

.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"/>

Upvotes: 0

Views: 52

Answers (1)

Marko Gresak
Marko Gresak

Reputation: 8207

Try using custom styles inside span/div instead of h1. It is a bit of extra work but makes it easier to achieve the same style because you're in total control of all applied style properties, where with the h1 tag, the browser already applies some styles so you have to match all of those in the input component, not to mention there can be some cross-browser issues.

Upvotes: 1

Related Questions