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

Answer 1

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>

Answer 2

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>