html - Put fixed text on an input text box

Question

How can I put default text in an HTML text input element which the user can't delete (fixed text at the start of the input).

The second thing what I want is that the cursor will be positioned after this fixed text.

Answer 1

Try this one. It might be helpful for you. It positions the text over the text input using absolute positioning.

.input-box { 
  position: relative; 
}

input { 
  display: block; 
  border: 1px solid #d7d6d6; 
  background: #fff; 
  padding: 10px 10px 10px 20px; 
  width: 195px; 
}

.unit { 
  position: absolute; 
  display: block; 
  left: 5px; 
  top: 10px; 
  z-index: 9; 
}

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">￡</span>
</div>