There is an input element that the user can input some things into, and I want to be able to add an overlay text behind it so it looks like a placeholder that doesn't get removed even if there is content in the input.

I obviously thought about a separate element, but I couldn't make it go between the background and the text of the input.

CodePudding user response：

• Wrap <input> in a <label>
• <label> will have the text, <input> will have a transparent background.
• <label> occupies the lower "layer" and acts as the <input>'s border. Assign position: relative to the <label> and position: absolute; z-index: 1; top: 0; left: 0; to <input> so that it sits "above" the <label>.

label {
  display: block;
  position: relative;
  width: max-content;
  padding: 0.75em 0 0.25em 0.75em;
  margin: 1rem 0;
  text-align: center;
  line-height: 0.5rem;
  vertical-align: sub;
  color: rgba(0, 0, 0, 0.4);
}

input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0.25em 0.5em;
  font: inherit;
  line-height: 1;
  background: transparent;
}

.top {
  padding-bottom: 1em;
  line-height: 1.5;
}

<label>This text belongs to the &lt;label&gt;<input></label>
<label >Having the text in the middle is messy<input></label>

CodePudding user response：

CSS is your go to for this implementation. Make the position of both the divs absolute, and make sure they have the same absolute components.

This link has a similar implementation.