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

Question

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

Maybe this will help: [Use Font Awesome Icon in Placeholder](https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder) — Hao Wu, Jan 06 '23 at 06:41
I want the `icon` to have a button like shape, so that it looks like the `Enter` key — , Jan 06 '23 at 06:45

Hao Wu · Accepted Answer · 2023-01-06T07:17:42.247

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>

The button like shape is not showing around the icon. It just looks like a normal icon. — , Jan 06 '23 at 07:04
There, I customized it for you, for the `` details, you could do it whatever you want — Hao Wu, Jan 06 '23 at 07:07

score 0 · Answer 2 · answered Jan 06 '23 at 09:10

First, you need to convert your SVG to URI to use as a background. I used the following site to convert the SVG to URI SVG to CSS background-image converter Then you need to adjust the width of your input field to show it in the centre of the text. You can also adjust the width of the SVG to adjust it between words.

function myFunction()
{
  let input = document.getElementById('input')
  if(input.value.length>0)
    {
    input.style.background = 'none'
    }
  else{
    input.style.background = `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat`;
  }
}

label {
  position: relative;
}

input {
  padding: 10px 10px;
  width: 150px;
  border: none;
  border-left: 2px solid black;
  outline: none;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat;
background-origin:border-box;
}

<label>
  <input type="text" placeholder="Press the           Key" id='input' oninput="myFunction();"/>
</label>

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

2 Answers2