How can I put a <span> inside of an <input>?

Question

This is not a duplicate. While I was basically looking for the same result as the other post, I wanted to go about it in a different way. They were using background image, and I wanted to use a <span>.

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.

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.

I'm thinking that I need to put it inside the textbox (somehow), then slide it to the right and hide it using overflow: hidden. I did also try to do this, but I couldn't get anywhere with it.

http://jsfiddle.net/qgy8Ly5L/16/

The <span> should be "behind" the white background when it's not showing. Mid transition should look like this:

_{(source: googledrive.com)}

Is this possible in CSS, and if so, how can I do it?

Answer 1

Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span.

function checkInput(text) {

  if (text) {
    $("#clearBtn1").addClass("show");
  } else {
    $("#clearBtn1").removeClass("show");
  }

}

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.clearBtn {
  position: absolute;
  top: 0;
  right: -15px;
  transition: right 0.2s;
}
.show {
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <input type="text" onkeyup="checkInput(this.value)" />
  <span id="clearBtn1" class="clearBtn">X</span>
</div>