Make input styles behave like h1 style-CodePudding

what it looks enter image description here

what it should look like enter image description here

Cant use contenteditable for a reason

<input 
 type="text"
 elementStyle="h1"
/>

CodePudding user response：

If you are trying to use only HTML and CSS to style your input, there is no attribute to set the element style to h1. As found here, most browsers will display the <h1> element with the following default values:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Hardcoding the properties to your <input>, you can achieve h1 style input.

input {
  margin: 100px;
  border: none;
  color: grey;

  /*h1 properties*/
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

/*no border even when clicked*/
input:focus {
  outline: none;
}

CodePudding user response：

I have a better option

copyNodeStyle.js

export default function copyNodeStyle(sourceNode, targetNode) {
  var computedStyle = window.getComputedStyle(
    document.querySelector(sourceNode)
  );
  console.log(computedStyle);
  Array.from(computedStyle).forEach(function (key) {
    return targetNode.style.setProperty(
      key,
      computedStyle.getPropertyValue(key),
      computedStyle.getPropertyPriority(key)
    );
  });
}

AddPost.js

useEffect(() => {
    copyNodeStyle("h1", document.querySelector(".addPostTitleInputToH1"));
});

CodePudding user response：

You need to change the width and height or/and font-size value's of your input like so:

<input style="width:100%; height:30px; font-size:30px" type='text' name='name'/>

It is not possible to give it a h1 style but doing it this way also gives way more control! :)

CodePudding user response：

You can do that by adding h1 CSS style to your input...

input {
  border: none;
  font-size: 2em;
  margin: 0.67em 0;
  font-weight: bold;
}

<input type="text" placeholder="Add title" />