title: How can I put a <span> inside of an <input>?
body: <p><strong>This is not a duplicate. While I was basically looking for the same result as <a href="https://stackoverflow.com/questions/6258521/clear-icon-inside-input-text">the other post</a>, I wanted to go about it in a different way. They were using background image, and I wanted to use a <code>&lt;span&gt;</code>.</strong></p>
  
  <p>I am trying to make a textbox so that when the user types into it, a "X" shows up on the right.  However, I do not want the "X" to show up when there is no text in the box, like it does now.</p>
  
  <p>I tried to make the "X" white, and have it transition it's color when it slides, but you can still select in when you drag the mousedown over it.</p>
  
  <p>I'm thinking that I need to put it inside the textbox (somehow), then slide it to the right and hide it using <code>overflow: hidden</code>.  I did also try to do this, but I couldn't get anywhere with it.</p>
  
  <h2><a href="http://jsfiddle.net/qgy8Ly5L/16/" rel="noreferrer">http://jsfiddle.net/qgy8Ly5L/16/</a></h2>
  
  <p>The <code>&lt;span&gt;</code> should be "behind" the white background when it's not showing.  Mid transition should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/hJsjG.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hJsjG.jpg" alt="x.jpg"></a><br>
  <sub>(source: <a href="https://26e3d181b28bd87078004dbcc70688d14e33c0da-www.googledrive.com/host/0BzEiAml5ygAeckxsOHFfZzI1emc" rel="noreferrer">googledrive.com</a>)</sub>  </p>
  
  <p>Is this possible in CSS, and if so, how can I do it?</p>