title: HTML Input Text with icon
body: <p>I am working on a webpage where I have a HTML Input Text element which is disabled onload.
  I currently have a edit button next to the Input Container onclick of which I disable/enable the field.</p>
  
  <pre><code>&lt;input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true"&gt;
  &lt;img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')"&gt;
  </code></pre>
  
  <p>Is there any other way in which I could place this icon in the input tab itself without overlapping the text.</p>
  
  <pre><code>img.onInput
  {
      position: relative;
      left: -20px;
  }
  </code></pre>
  
  <p>I tried using CSS with but the text gets underneath the icon which I do not want.</p>
  
  <p>I am trying to get something like the "google search" add-on in firefox. Is that at all possible with simple input text and icon?</p>
  
  <p>Thanks in advance :)</p>
  
  <p>Update:
  <img src="https://i.stack.imgur.com/mbisi.png" alt="enter image description here">
  I want a button like in this image on text input. The icon is clickable and I want to trigger a JavaScript function onClick event.</p>
  
  <p>Found the answer I was looking for: <a href="https://stackoverflow.com/a/6258628/2596762">https://stackoverflow.com/a/6258628/2596762</a></p>