title: HTML alternative to <input type=text> that can be assigned a unique ID and that blends in with text
body: <p>What html element is capable of being assigned an ID and is also an alternative for the <code>&lt;input&gt;</code> element? Because currently an  element is being used in order to update that block of text based on user input; however, appearance-wise, the <code>&lt;input&gt;</code> element doesn't work since it has the large rectangular block around it.</p>
  
  <pre><code>&lt;div id="myModal"&gt;
  ...
  &lt;input type="text" id="txtUserName" size="150" disabled&gt;&lt;/input&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>&lt;script&gt;
    ...
  $('#txtUserName',$('#myModal')).val('Jim Smith');
    ...
  &lt;/script&gt;
  </code></pre>
  
  <p>In addition to the rectangular block around the text there also appears to be a limit on how far the box will expand. </p>
  
  <p><img src="https://i.stack.imgur.com/pDKQB.png" alt="enter image description here"></p>
  
  <p>Thoughts or suggestions on how the updated text can blend in seamlessly with the rest of the text? Because ultimately the goal is for the user to be able to send what appears in the modal (a combination of pre-filled text and the user input) to another person via email.</p>