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

<kbd >
    <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

CodePudding user response：

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 >
  <input type="text" placeholder=" ">
  <span >
    Press the
    <kbd >
      <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>

CodePudding user response：

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,")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,")center / contain no-repeat;
background-origin:border-box;
}

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