[SOLVED] How do I use an HTML inline tag inside a string?

Issue

I have an svg icon (which is the symbol of the Enter key):

<kbd class="DocSearch-Commands-Key">
    <svg width="15" height="15" aria-label="Enter key" role="img">
        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
            <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
       </g>
   </svg>
</kbd>

I have an input text field like this:

<input type="text" placeholder="Press the ENTER key">

I want to append the svg icon inside the placeholder of the input field, such that the placeholder is like

Press the <-| key

How do I achieve this?

EDIT: The button icons should be like this:

enter image description here

Solution

You can’t do it with placeholder property since it only supports text.

If your icon can be a font icon, you could do it as Use Font Awesome Icon in Placeholder.

There’s a workaround that you could fake a placeholder using :placeholder-shown pseudo class, so the "placeholder" can be anything.

For example:

.input-wrapper {
  position: relative;
}

.input-wrapper .placeholder {
  display: none;
  height: 100%;
  top: 0;
  left: 8px;
  align-items: center;
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  font-size: 0.8em;
}

.input-wrapper input:placeholder-shown + .placeholder {
  display: flex;
}

/* customization */
input {
  padding: 6px;
}

.DocSearch-Commands-Key {
  border: solid 1px #ccc;
  border-radius: 4px;
  height: 16px;
  display: flex;
  align-items: center;
  margin: 0 4px;
  margin-top: -1px;
  padding: 0 4px;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
  background-color: #eee;
}
<div class="input-wrapper">
  <input type="text" placeholder=" ">
  <span class="placeholder">
    Press the
    <kbd class="DocSearch-Commands-Key">
      <svg width="15" height="15" aria-label="Enter key" role="img">
        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
            <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
        </g>
      </svg>
    </kbd>
     key
  </span>
</div>

Answered By – Hao Wu

Answer Checked By – Katrina (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *